所以我有一个带有标题,主体和页脚的网页.我希望主体填充页面的100%(在页脚和页眉之间填充100%)我的页脚是绝对位置底部:0.每次我尝试将主体设置为100%高度或更改位置或其他东西它也将溢出标题.如果将body设置为绝对位置top: 40(因为我的标题是40px高),它将向下移动40px太远,创建一个滚动条.
我创建了一个简单的html文件,因为我实际上无法从实际项目中发布整个页面/ css.使用示例代码,即使主内容体填满屏幕,它也会向下移动40px(因为我认为是标题).
html,
body {
margin: 0;
padding: 0;
}
header {
height: 40px;
width: 100%;
background-color: blue;
}
#maincontent {
background-color: green;
height: 100%;
width: 100%;
}
footer {
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}HTML
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">
</div>
<footer></footer>
</body>
</html>谁知道答案？
我正在建立一个网站，其中有一个垂直交替的图像库。
归根结底，我尝试的是为 div （实际网站中的图像）设置硬编码宽度，然后使用位置来定位 div 的右列。然后添加第三个 div，该 div 应该位于左列中，位于右列中 div 的高度之后。
.large-container {
width: 200px;
height: 100px;
background-color: blue;
color: white;
}
.small-container {
width: 150px;
height: 50px;
background-color: red;
position:absolute;
top: 100px;
left: 200px;
}<div style="position:relative;">
<div class="large-container">
This is an outer container
</div>
<div class="small-container">
This has been the small one
</div>
<div class="large-container">
This is an outer container
</div>
</div>这是预期的结果： 预期结果 这是当前的结果： 当前结果 正如您所看到的，左列中的第二个 div 位于第一个 div 的正下方。我希望它位于右侧 div 的高度之后。
