Question

我目前在这个页面上工作，有些事情我无法弄清楚。

首先：我想在容器底部填充/边距。我尝试在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: 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;
}

Answer 1

我想在容器底部填充/边距。我尝试在CSS中添加它，但我想我在某处遗漏了什么？

您缺少浮动元素通常不会影响其父元素的高度 - 因此您的容器没有您想象的那么高（您可以在浏览器的开发人员工具中轻松找到它们！），所以你看不到任何底部填充的影响。

获取浮动元素“包含”的一种方法是父元素中的overflow:hidden。设置（并使高度为最小高度），它可以工作：

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

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

（对于边界，请研究“人造柱”或“等高柱”。）

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

1 个答案: