Question

由于某些原因，当我应用div时，我的.section {height: 100%;}没有达到高度，但是当我以像素为单位给它height属性时，它可以正常工作。我的想法是我希望div s使用浏览器窗口，因此无论显示器的分辨率如何，div都会覆盖浏览器的整个部分。

http://jsfiddle.net/marrto/npe2y/

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 10 </title>
<!-- Slidebars CSS -->

<link href="css/mystyle.css" rel="stylesheet" text="text/css" >
</head>
<body>

<!-- MAIN AREA -->


<!-- WRAPPER - WRAPPS NAVIGATION AND LOGO-->
<div id="wrapper">
    <div id="header"> 
        <div class="logo">
            <a href="index.html"> <img src="logo.png" alt="Logo"> </a>
        </div>

        <div class="navBar">
        <ul id="nav">
        <li><a href="#topbar">Homepage</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#photos">Photos</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
        </div>
        <div style="clear: both;"> </div>
    </div>
</div>
<!-- WRAPPER END -->





<div id="topbar" class="section">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

<div id="about" class="section">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

<div id="photos" class="section">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

<div id="contact" class="section">
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>


<!-- WRAPPER - WRAPPS NAVIGATION AND LOGO-->
<div id="container">
    <div id="footer"> 
        <div class="legal">
            text
        </div>

        <div class="site">
            Text
        </div>
        <div style="clear: both;"> </div>
    </div>
</div>
<!-- WRAPPER END -->



    </body>
</html>


body { /* general font size, family and color */
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
    color: #343434;
    margin: 0;
    padding: 0;
}


.sb-toggle-left {
    display: none;
}

#wrapper { /* wrapps logo and the navigation links */
    background-color: #ffffff;
    height: 60px;
    width: 100%;
    top: 0;
    left: 0px;
    position: relative;
    z-index: 99;
    -moz-box-shadow:    0 0 3px 0 #ccc;
    -webkit-box-shadow: 0 0 3px 0 #ccc;
    box-shadow:         0 0 3px 0 #ccc; 
}

.section:nth-child(odd) {
    background-color: #b1d994;
}
.section:nth-child(even) {
    background-color: #5bc473;
}

.section {
    height: 100%;
    padding: 5%;
}


.content {
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    text-align: justify;
}

/*
#topbar {
    background-image: url('banner.jpg');
}
*/

#header {
    width: 60%;
    position:relative;
    margin-left: auto;
    margin-right: auto;
    min-width: 600px;
}

.logo {
    float: left;
    padding-top: .9em;  
}

.navBar {
    float: right;
    padding-top: 1.3em;
}

.navBar ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.navBar li {
float:left;
}

.navBar a:link, .navBar a:visited {
    display: block;
    color:#4a4949;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    font-size: 0.8em;
}


.navBar a:hover {
    color:#ababab;
} 

#container { /* wrapps logo and the navigation links */
    background-color: #ffffff;
    height: 60px;
    width: 100%;
    top: 0;
    left: 0px;
    -moz-box-shadow:    0 0 3px 0 #ccc;
    -webkit-box-shadow: 0 0 3px 0 #ccc;
    box-shadow:         0 0 3px 0 #ccc; 
}


#footer {
    width: 60%;
    position:relative;
    margin-left: auto;
    margin-right: auto;
}

.legal {
    float: left;
    padding-top: 1.3em; 
}

.site {
    float: right;
    padding-top: 1.3em;
}

Answer 1

如果父元素没有明确设置高度，则％height不会在其中生成...

在您的情况下，具有班级section的div的父级是<body>，其中没有高度设置。

Answer 2

HERE一个工作小提琴。
我刚用100vh改变了100％

.section {
    height: 100vh;
    padding: 5%;
}

Answer 3

您需要设置以下css：

html,body{
height:100%;}

Answer 4

你可以用js

来做到这一点

element = document.getElementsByClassName("section");
   for(element in ele){
    ele.style.width=screen.width+"px";  
   }

如果要修正宽度，高度不会改变

Answer 5

对我来说，它是通过在最顶层的容器div中设置位置来实现的。

百分比高度不起作用，以像素为单位

5 个答案: