我写了这段HTML代码。
<style>
.container { position:relative;}
#sidebar {
position:absolute;
padding: 0.5%;
top:0; bottom:0; left:0;
width:20%;
margin-left: 1.5%;
margin-top: 7%;
margin-bottom: 6.5%;
background: #ff0;
}
#header { border:1px solid #000; width:100%; height:10%;
margin:0 0 5px 0;
}
#content { border:1px solid #000; width:77%; height:80%;
position: absolute;
margin-left: 23%;
}
#footer { border:1px solid #000; width:100%; height:10%;
margin-top: 80%;
}
</style>
我的HTML代码如下:
<div class="container">
<div id="sidebar">
This is the siderbar of the page
<br><br>
Select Gender
<select name="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<hr>
<label for="amount">Age range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range"></div>
</div>
<div id="header">
<h1>This is the header of the page</h1>
</div>
<div id="content">
This is content page..
</div>
<div id="footer">This is the footer of the page..</div>
</div>
当我删除footer
时,.content
变得太小。 侧边栏
失去颜色。我做错了什么?
最佳答案
When I remove footer,
.content
becomes smaller. Why?
因为footer
使内容变大margin-top: 80%;
I understand what you are talking about. What is the solution?
您使用百分比值作为高度
,然后将height:100%;
赋予其父级,因为带有百分比值的高度继承自其父级,并且最后,删除 margin-top
。
html,
body,
.container {
position: relative;
height: 100%;
}
#sidebar {
position: absolute;
padding: 0.5%;
top: 0;
bottom: 0;
left: 0;
width: 20%;
margin-left: 1.5%;
margin-top: 7%;
margin-bottom: 6.5%;
background: #ff0;
}
#header {
border: 1px solid #000;
width: 100%;
height: 10%;
margin: 0 0 5px 0;
}
#content {
border: 1px solid #000;
width: 77%;
height: 80%;
position: absolute;
margin-left: 23%;
}
#footer {
border: 1px solid #000;
width: 100%;
height: 10%;
}
<div class="container">
<div id="sidebar">
This is the siderbar of the page
<br>
<br>Select Gender
<select name="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<hr>
<label for="amount">Age range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range"></div>
</div>
<div id="header">
<h1>This is the header of the page</h1>
</div>
<div id="content">
This is content page..
</div>
</div>
关于html - 删除页面页脚会使页面变形。如何修复它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34431168/