Итак, я пытаюсь создать веб-сайт с отзывчивым веб-дизайном, поэтому изменение размера страницы или доступа к веб-сайту с помощью карманного устройства, например, регулирует элементы согласно и делает красивый, чистый взгляд.Отрегулируйте высоту div, когда размер окна изменился, чтобы обеспечить переполнение
Пока все хорошо, я получил заголовок, навигацию, логотип и даже видео посадку на работу. Моя проблема заключается в том, что у меня есть две «боковые панели», которые по существу две пустые div и просто поместите хороший 20px широкий полосатый рисунок с каждой стороны основного контента.
Я знаю, чтобы сделать эти отображения, я должен установить все, в том числе html, body с height:100%; в моем CSS, который работал хорошо, пока не пришло время, чтобы поместить содержимое в середине «содержание» div.
Проблема не в том, что они не будут отображаться, но текст в моем содержании div будет переполняться, если окно браузера будет изменено достаточно мало. Когда это произошло, обе боковые панели не будут следовать за переполнением, поэтому вы получите этот чистый чистый вид, пока не перейдете к переполнению и не увидите, что боковые панели остановились, несмотря на то, что текст все еще продолжается.
У меня также есть <footer>, и текст будет переполняться и продолжен и после нижнего колонтитула.
Я попытался min-height:100%; и height:auto; во всех родительских элементов, но их использование либо удаляет height:100%, и как такие боковые панели исчезают, или не имеет никакого значения для вопроса.
Я бы предпочел не overflow:scroll, я хочу сделать так, чтобы размер div изменялся для размещения переполнения и, как результат, толкает нижний колонтитул вниз, а боковые панели изменяются, чтобы покрыть всю страницу.
Короче говоря, мне нужно установить div на 100% документа, а не на 100% окна.
Мой HTML:
<html>
<head>
<link href="styles/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
</head>
<body>
<header>
<div class="logo" id="logo"></div>
<?php include("navigation.php"); ?>
</header>
<div id="login" class="login" style="display:none">
<div id="forms" class="forms">LOGIN FORM</div>
</div>
<div class="main">
<div class="sidebarleft"></div><div class="sidebarright"></div>
<div class="top">
<div class="navigationbox">
NAVIGATION TABLE
</div>
<div id="animation">
VIDEO PLAYER TABLE
</div>
</div>
<div id="content">
CONTENT GOES HERE, THIS IS THE CONTENT THAT IS OVERFLOWING
</div>
</body>
</html>
Мой CSS:
@-ms-viewport {
width: device-width;
}
body {
font-size: 1.05em;
font-family: Tahoma;
background: #4f0100;
color: #fff;
padding-top:121px;
height:100%;
}
html {
height:100%;
}
header {
background:url('../images/HeaderPattern.png');
background-repeat:repeat-x;
width: 100%;
height: 120px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.login {
background:url('../images/GreenPattern.png');
background-repeat:repeat-x;
width: 100%;
height: 30px;
}
.forms {
text-align: center;
padding-top: 4px;
}
#logo{
left: 0;
padding-left: 50px;
color:#edb27a;
font-family:"Cornet";
background: -webkit-linear-gradient(#f6d8b6 15%, #e48d40 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 4em;
height: 120px;
margin-top: 10px;
position:fixed;
top:10px;
}
nav {
float: right;
right:0px;
padding-right:25px;
height:120px;
top:40px;
position:fixed;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #edb27a url(../images/menu-icon.png) center;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
.main {
width:85%;
margin:0 auto;
height:100%;
}
.content {
text-align:center;
padding-top:25px;
}
.sidebarleft {
height:100%;
width:20px;
background-image:url('../images/SidebarLeft.png');
background-repeat:repeat-y;
float:left;
position:relative;
left:-40px
}
.sidebarright {
height:100%;
width:20px;
background-image:url('../images/SidebarRight.png');
background-repeat:repeat-y;
float:right;
position:relative;
right:-40px
}
.top {
position:relative;
overflow:hidden;
height:320px;
}
Используйте jquery, чтобы установить высоту боковой панели, добавив высоты div. Пример, высота боковой панели = высота логотипа + верхняя высота + высота содержимого + высота нижнего колонтитула. Это всего лишь идея, я не проверял это. – Ray
Эй, Рэй, спасибо за предложение, однако я не знаю jquery или javascript, поэтому я надеялся сделать это с помощью чистого CSS и HTML. Вы считаете, что jquery - единственный способ сделать это? – radiocaf
Я не мог придумать, как это сделать, используя чистый CSS, поскольку боковая панель зависит от высоты разных div. – Ray