向垂直线菜单栏的底部和100％高度添加边距/填充。

我目前正在这个页面上工作，有些事情我找不到。向垂直线菜单栏的底部和100％高度添加边距/填充。

第一：我想在我的容器底部填充/边距。我尝试将它添加到CSS中，但我想我在某处丢失了某些东西？

第二：我希望.menubar的边框是100％的高度。

希望有人能帮助我。谢谢。

和代码本身

<!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: [email protected]"><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; 
}

来源

2014-02-07 user3285022

我想在我的容器底部的填充/保证金。我尝试将它添加到CSS中，但我想我在某处丢失了某些东西？

你缺少一个浮动的元素通常不影响它们的父元素的高度 - 并且为此您的容器并不像你想象的那么高（你可以很容易地在自己浏览器的开发者工具发现了！），所以你看不到任何底部填充的效果。

获得浮动元素“包含”的一种方法是在父元素中使用overflow:hidden。设置（可能做出高度的最小高度），以及它的工作原理：

.container { 
    min-height: 100%; 
    min-width: 1000px; 
    overflow: hidden; 
    padding-bottom: 2em; 
    width: 100%; 
}

http://jsfiddle.net/ZtBsq/2/

（而对于边界，请研究“人造列”或“同等高度列”）

来源

2014-02-07 19:07:47 CBroe

谢谢先生！非常有用的回答:) – user3285022

向垂直线菜单栏的底部和100％高度添加边距/填充。

回答

相关问题