0
因此，我試圖用響應式網頁設計製作網站，例如調整頁面大小或從手持設備訪問網站，調整元素並根據漂亮，乾淨的外觀。當窗口調整大小以適應溢出時調整div高度
到目前爲止，我得到了一個標題，導航，標識，甚至一個視頻登陸工作。我的問題是我有兩個「側邊欄」，基本上是兩個空的div，並在主內容的每一側放置一個漂亮的20px寬條紋圖案。
我知道讓這些顯示器，我必須設置的一切，包括html, body在我的CSS，它的工作很好，直到它來到的時候把內容在中間的「內容」 divheight:100%;。
的問題不在於他們不顯示，但如果瀏覽器窗口大小是足夠小，在我的內容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