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