Блог

Главная - Вопросы по программированию - как установить ширину страницы в соответствии с разрешением экрана и прокручивать остальную часть страницы по горизонтали при изменении размера браузера?

как установить ширину страницы в соответствии с разрешением экрана и прокручивать остальную часть страницы по горизонтали при изменении размера браузера?

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

вот html:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test1</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header"></div>
<div id="picb"><ul id=b><button class="but1">KARATE</button><button class="but2">SILAMBATAM</button><button class="but3">KAALADI KUTHUVARISAI</button></ul></div>
<div id="home1"></div>
<div id="home2"><img id="shot_kara" src="src/ska-logo.png" ></img></div>
<div id="footer1"></div></body>
</body>
</html>

CSS:

 @media screen and (min-width: 500px) {
 body

 {
    position:absolute;
    width:100%;
    overflow-x:scroll;
    overflow:scroll;
    background-color:#FFF;
    margin:0 auto 0 auto;
}
div#picb {
    top:30px;
    vertical-align:top;
    max-height:100%;
    height:auto;
    min-width:500px;
    position:relative;
    margin-left:0;
    background-image:url(src/black-belt.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center; 
    -webkit-animation: fadein 2s;
    animation: fadein 2s;
    padding-top:40%;
    overflow:hidden;
}
@keyframes fadein {
    from{opacity:0}
    to{opacity:1}
}
@-webkit-keyframes fadein {
    from{opacity:0}
    to{opacity:1}
}


div#header {
    max-height:100%;
    height:auto;
    opacity:0.96;
    z-index:10000;
    color: #CCC;
    letter-spacing: 8px;
    position: fixed;
    left: 0%;
    right: 0;
    top: 0%;
    background-color: #333;
    padding-bottom: 3.5%;
    /* padding-left:100%;
    padding-right:100% */
    font-size: 20px;
    overflow:hidden;
    }
div#footer1 {
    margin-top:60%;
    max-height:100%;
    height:auto;
    /* padding-left:100%; */
    position:relative;
    left:0;
    right: 0;
    background-color:#F60;
    padding-top:260px;
    /* padding-right:100%; */

}
div#home1 {
    vertical-align:top;
    overflow-x:hidden;
    padding-left:100%;
    padding-bottom:40%;
    position:relative;
    background-color:#999;
}
#b { 
  position:absolute;
    left:30%;
    top:50%;
    }
button.but1 {
    margin:0 4px 0 0;
    line-height:40px;
    cursor:pointer;
    font:"Lucida Console";
    font-size:25px;
    position:relative;
    border-radius: 3px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    background-color: transparent;
    color: White;
    border: 2px solid #FFF;  
}
button.but1:hover {
    color: black;
    background-color:#FFF;
}

button.but2 {
    margin:0 4px 0 0;
    line-height:40px;
    cursor:pointer;
    font:"Lucida Console";
    -webkit-transition-duration: 0.4s;
    font-size:25px;
    position:relative;
    border-radius: 3px;
    transition-duration: 0.4s;
    background-color: transparent;
    color: White;
    border: 2px solid #FFF;  
}
button.but2:hover {
    color: black;
    background-color:#FFF;
}
button.but3 {
    line-height:40px;
    cursor:pointer;
    font:"Lucida Console";
    font-size:25px;
    position:relative;
    border-radius: 3px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    background-color: transparent;
    color: White;
    border: 2px solid #FFF;  
}
button.but3:hover {
    color: black;
    background-color:#FFF;
}
#home2 {

    overflow-x:hidden;

    overflow-y:hidden;
    left:0px;
    position:relative;
    margin-top:60%;
    background-color:#C60;
    padding-right:100%;
    padding-bottom:40%;
    }
#shot_kara {
    position:relative;
    left:310px;
    top:210px;

}
}

Я пробовал width: 1366px; но это заставляет браузер оставлять пробелы при просмотре на больших экранах. Короче говоря; Мой веб-сайт должен прокручиваться по горизонтали, когда окно свернуто. например; на веб-сайте stack overflow; при изменении размера браузера; появляется горизонтальная полоса прокрутки.
Должен ли я использовать Java script для этого?
Заранее спасибо.

Комментарии:

1. Вы пробовали просто width: 100% ? Кроме того, вы добавили сброс css для удаления любых стилей браузера, которые могут добавлять пробелы?

2. да. но это масштабирует все остальные элементы до разрешения

Ответ №1:

Вы можете использовать соотношение пикселей javascript для определения разрешения. Для тестирования мобильного портретного или альбомного режима вы можете протестировать onorientchange, а также или вместо onresize .