了解基于百分比的 div 和响应式设计

Question

我已将 html 和正文宽度和高度设置为 100%。为什么这不足以显示我的背景图像（#home1、#home2、#home3）？这不是设置了所有 div 的高度所基于的像素吗？我希望内容决定页脚和页眉的高度，即没有像素高度。布局应为：徽标...全高（减去页眉和页脚）。 #photo-group...全高（减去页眉和页脚）。 class .pic-group 应该使每张照片占#photo-group 的 30%。目前，除非我在 class .pic-group 上放置一个像素高度，否则不会显示任何图像。我想做的事情是可能的，但我错过了一些明显的事情吗？设置基于像素的高度将 'insult' 我对流畅布局的尝试。

<?php 
session_start();
include('debug-code.php');
$thisPage = "home";
$title="";
$metaDesc="";
include('head.php');?>
<style>
html {
height:100%;
font-size: 100%;
overflow-y: scroll;
}

body {
font-size:16px;
color:#434c50;
font-family: arial, serif;
background:white;
width:100%;
height:100%;
}

.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
clear: both;
height:0;
}

#home-container {
position:relative;
margin:0 auto;
width:70%;
background:white;
}

#home-content {
position:relative;
}

#home-content .content {
width:100%;
}

div.logo.home {
position:relative;
float:left;
width:60%;
background:#fdf2fd;
}

div.logo.home img {
width:60%;
}

#home-footer {
position:relative;
bottom:0;
background:#d5d0d5;/*url('../images/footerBG.png')*/;
color:white;
border-top:1px solid #05577a;
}

#home-footer .content {
margin:0 auto;
width:70%;
padding:1.5rem 0;
}

#photo-group {
display:block;
width:20%;
height:100%;
float:left;
}

.pic-group {
height:30%;
display:block;
position:relative;
}

#home1 {
background: blue url('../images/home1.png') no-repeat top left;
background-size:100%;
}

#home2 {
background:yellow url('../images/home2.png') no-repeat top left;
background-size:100%;
}

#home3 {
background:red url('../images/home3.png') no-repeat top left;
background-size:100%;
}
</style>
</head> 
<body> 
<?php include('home-header.php')?>
<div id="home-container"><div class="content clearfix">
        <div id="home-content"><div class="content clearfix">
            <div class="logo home"><?php include('logo-home-image.htm');?></div>
            <div id="photo-group">
            <div id="home1" class="pic-group"></div><div id="home2" class="pic-group"></div><div id="home3" class="pic-group"></div>
            </div>
            <?php include('home-menu.php');?>
            <div id='mobile-menu'></div>            
        </div></div><!--end content-->  
    <?php include("disclaimer.htm") ?>
</div></div><!--end container-->
<?php include("home-footer.htm") ?>
</body> 
</html>

Answer 1

您需要在 div 上显式设置 height 以使其填满其 offsetparent 的可用高度。在这种情况下 body。 Div 元素是块元素。这意味着默认情况下它们占用其偏移量 parent 的可用宽度。通过高度默认设置为自动。这意味着当 div 中的内容换行时它会增加。

但是您希望您的 div 占用 body 中的所有 space。但是 body 不是 #home div 的偏移量parent。

偏移量parents:

#home > #photo-group > #home-content > #home-container > body

但是在#home-container你还没有设置高度和相对位置。所以这成为所有 child div 的 base。将它们的高度相对设置为此 div。因此，在 0 上设置 30% 会导致 0。显式设置 300px 当然有效。这让#home 的内容溢出它的 parent。

了解基于百分比的 div 和响应式设计

Understanding percentage based divs and responsive design

css

responsive-design