Css 了解基于百分比的div和响应性设计_Css_Responsive Design

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

css responsive-design

Css 了解基于百分比的div和响应性设计,css,responsive-design,Css,Responsive Design,我已经将html和正文的宽度和高度设置为100%。为什么这还不足以显示我的背景图像（#home1、#home2、#home3）？这不是设置了所有div将基于其高度的像素吗？我希望内容规定页脚和页眉的高度，即没有像素高度。布局应为：徽标…全高（减去页眉和页脚）#照片组…全高（减去页眉和页脚）。班级的照片组应该让每张照片占照片组的30%。目前，除非我在class.pic组上放置一个像素高度，否则不会显示任何图像。我想做的是可能的，我错过了一些明显的事情吗？设置基于像素的高度将“侮辱”我对流体布局的尝

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

<?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>


html{
身高：100%；
字体大小：100%；
溢出y：滚动；
}
身体{
字体大小：16px；
颜色：#434c50；
字体系列：arial，衬线；
背景：白色；
宽度：100%；
身高：100%；
}
.clearfix:之后{
内容：“；/*旧浏览器不支持空内容*/
可见性：隐藏；
显示：块；
明确：两者皆有；
身高：0；
}
#家用集装箱{
位置：相对位置；
保证金：0自动；
宽度：70%；
背景：白色；
}
#家庭内容{
位置：相对位置；
}
#主页内容{
宽度：100%；
}
家庭部{
位置：相对位置；
浮动：左；
宽度：60%；
背景#fdf2fd；
}
部门logo.home img{
宽度：60%；
}
#主页页脚{
位置：相对位置；
底部：0；
背景：#d5d0d5；/*url（'../images/footerBG.png'）*/；
颜色：白色；
边框顶部：1px实心#05577a；
}
#主页页脚内容{
保证金：0自动；
宽度：70%；
填充：1.5雷姆0；
}
#照片组{
显示：块；
宽度：20%；
身高：100%；
浮动：左；
}
.pic组{
身高：30%；
显示：块；
位置：相对位置；
}
#家庭1{
背景：蓝色url（'../images/home1.png'）不重复左上角；
背景大小：100%；
}
#家庭2{
背景：黄色url（'../images/home2.png'）不重复左上角；
背景大小：100%；
}
#家庭3{
背景：红色url（'../images/home3.png'）不重复左上角；
背景大小：100%；
}

您需要在div上显式设置

高度

，使其填写其

偏移父项的可用高度

。在这种情况下，身体。Div元素是块元素。这意味着默认情况下，它们占用offsetparent的可用宽度。默认情况下，高度设置为“自动”。这意味着当div中的内容被包装到新行时，它会增加

然而，你希望你的div占据身体的所有空间。但这具尸体并不是主唱的父母

抵销父母：

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

但是在

#home container

上，您没有设置高度并将位置设置为相对。因此，这将成为所有子div的

基础。设置它们相对于该分区的高度。因此，在0
上设置30%
将导致0
。明确设置300px
当然有效。这让“家”的内容溢出了它的父母。
你的回答在很多方面帮助了我。我已经在html中包含了我需要的图像，而不是作为背景图像。我从你的回答中推断出，除非高度在div链中的“某处”明确设置，否则不能使用背景图像，对吗？如果是这样，如何保持响应性设计的流体布局（%）？Java？@Leslie设置背景不会触发高度。与现实生活相比。如果你把一张海报放到一个小的照片列表中，它只会显示海报的一部分，因为尺寸不匹配。流畅的设计不是css的问题。只需使用高度设置正确的offsetparent。如果您给出#主容器
高度100%
应该会给出结果。感谢您的解释。