我目前正在处理此页面，有些事情我无法弄清楚。
首先:我想要在我的容器底部有一个填充/边距。我尝试将它添加到 CSS 中，但我想我在某处遗漏了什么？
第二:我希望 .menubar 的边框为高度的 100%。
希望有人能帮帮我。谢谢。
这是我的 fiddle :http://jsfiddle.net/ZtBsq/1/
和代码本身
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio Kevin Schouten</title>
<link href="online portfolio.css" rel="stylesheet" type="text/css">
</head>
<body id="home_page">
<div class="container">
<div class="menubar">
<div id="logo" class="box">
<a href="index.html"><img src="Images/logo.png" width="100%" height="100%" alt="logo kevin schouten"> </a>
</div>
<div id="about" class="box">
<a href="about.html"><img src="Images/about.png" width="100%" height="100%" alt="about Kevin Schouten">
</a> </div>
<div id="design" class="box">
<a href="design.html"><img src="Images/design.png" width="100%" height="100%" alt="Design Kevin Schouten">
</a> </div>
<div id="drawings" class="box">
<a href="drawings.html"><img src="Images/drawings.png" width="100%" height="100%" alt="Drawings Kevin
Schouten"> </a> </div>
<div id="video" class="box">
<a href="video.html"><img src="Images/Video.png" width="100%" height="100%" alt="Video's Kevin Schouten">
</a> </div>
<div id="digital" class="box">
<a href="digital.html"><img src="Images/digital.png" width="100%" height="100%" alt="Digital Kevin
Schouten"> </a> </div>
<div id="contact">
<div id="facebook" class="box">
<a href="https://www.facebook.com/kevin.schouten" target="new"><img src="Images/facebook.png" width=
"100%" height="100%" alt="facebook Kevin Schouten"> </a> </div>
<div id="email" class="box">
<a href="mailto: kevinschouten123@gmail.com"><img src="Images/email.png" width="100%" height="100%"
alt="Email Kevin Schouten"> </a>
</div>
</div>
<div id="icoon">
<img src="Images/signature.png" width="70%" height="180px" alt="signature Kevin Schouten" id="signature">
</div>
</div>
<div class="content" id="content">
<div id=info>
</div>
</div>
</div>
</body>
</html>
和 CSS
@charset "utf-8";
/* CSS Document */
body, html {
margin: 0;
padding: 0;
height: 100%;
background-image: url(Images/achtergrond.jpg);
background-size: auto;
background-repeat: repeat-y;
background-position: center;
}
.container {
width: 100%;
min-width: 1000px;
height: 100%;
}
.menubar {
float: left;
width: 200px;
background-color: transparent;
height: 100%;
min-height: 100%;
position: absolute;
border-right: 1px solid rgba(36,36,36,0.5);
}
.content{
float: right;
background-color: transparent;
width: 85%;
}
.box {
border-bottom: 1px solid rgba(36,36,36,0.5)
}
.box:hover{
background:rgba(255,255,255,0.5)
}
#logo {
width: 100%;
height: 60px;
}
#about {
width: 100%;
height: 60px;
}
#design {
width: 100%;
height: 60px;
}
#drawings {
width: 100%;
height: 60px;
}
#video {
width: 100%;
height: 60px;
}
#digital {
width: 100%;
height: 60px;
}
#contact {
width: 100%;
height: 60px;
}
#facebook {
float: left;
height: 60px;
width: 49.5%;
border-right: 1px solid rgba(36,36,36,0.5);
}
#email {
height: 60px;
width: 49.5%;
float: right;
}
#icoon {
width: 100%;
height: 215px;
border-bottom: 1px solid rgba(36,36,36,0.5);
}
#home_page #logo{
background-color:rgba(255,255,255,0.5)
}
#about_page #about{
background-color:rgba(255,255,255,0.5)
}
#design_page #design{
background-color:rgba(255,255,255,0.5)
}
#drawings_page #drawings{
background-color:rgba(255,255,255,0.5)
}
#video_page #video{
background-color:rgba(255,255,255,0.5)
}
#digital_page #digital{
background-color:rgba(255,255,255,0.5)
}
#info {
float: left;
height: 700px;
width: 80%;
min-width:600px;
left: 10%;
background-color: rgba(26,26,26,1);
position: relative;
margin-top: 60px;
border-radius: 5px;
}
#signature {
float: left;
left: 15%;
position: relative;
top: 25px;
}
最佳答案
I would like a padding/margin at the bottom of my container. I tried adding it in the CSS but i think I'm missing something somewhere?
您忽略了 float 元素通常不会影响其父元素的高度——因此您的容器没有您想象的那么高(您自己可以在浏览器的开发工具中轻松发现这一点!)，所以您看不到任何底部填充的影响。
“包含” float 元素的一种方法是在父元素中使用 overflow:hidden。设置它(并将高度设置为最小高度)，它就可以工作了:
.container {
min-height: 100%;
min-width: 1000px;
overflow: hidden;
padding-bottom: 2em;
width: 100%;
}
(对于边框，请研究“人造列”或“等高列”。)
关于html - 在垂直线菜单栏的底部和 100% 高度添加边距/填充。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21634968/