【发布时间】：2016-02-01 20:46:07
【问题描述】：
所以我正在尝试制作一个具有响应式网页设计的网站，因此调整页面大小或从手持设备访问网站，例如，调整元素并做出漂亮、干净的外观。
到目前为止一切顺利，我得到了一个标题、导航、徽标，甚至还有一个视频登陆。我的问题是我有两个“侧边栏”，它们本质上是两个空的div，只是在主要内容的每一侧都放了一个漂亮的 20 像素宽的条纹图案。
我知道要进行这些显示，我必须在我的 CSS 中设置所有内容，包括 html, body 和 height:100%;，这在将内容放在中间“内容”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 是唯一的方法吗？
-
我想不出使用纯 CSS 的方法，因为侧边栏取决于不同 div 的高度。
-
侧边栏只是背景吗？
-
是的，侧边栏是重复的 20x20 像素背景。这是一个空的 div，无论如何我都想从页面顶部延伸到底部，并且如果发生溢出，它包括任何溢出。哦，我不能将其设置为正文背景，因为当我尝试制作响应式网页时，侧边栏周围的内容 div 会动态调整大小，因此在调整大小时静态正文背景会显得格格不入。除非我错过了什么技巧？