所以我正在尝试制作一个具有响应式网页设计的网站,因此调整页面大小或从手持设备访问网站,例如,根据调整元素并使外观漂亮、干净。
到目前为止一切顺利,我得到了标题、导航、 Logo ,甚至视频登陆。我的问题是我有两个“侧边栏”,它们基本上是两个空的 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;
}
最佳答案
我删除了你的左/右列。
参见 fiddle :https://jsfiddle.net/sg75uwmv/2/
.main {
width:100%; min-height:100%;
position:relative;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}
.center-col {
margin-left:20px; margin-right:20px;
background-color:#4f0100;
}
这是 div 缩放以适合其内容的默认行为。所以我们只需要确保我们不会阻止它。直接在容器(.main)上尝试背景,然后将另一种背景颜色放入中心栏。
关于html - 调整窗口大小时调整 div 高度以适应溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33469639/