瞭解基於百分比的div和響應式設計

我已經設置html和身體寬度和高度爲100％。爲什麼這不足以讓我的背景圖像顯示（＃home1，＃home2，＃home3）？這不是設置所有div將基於其高度的像素嗎？我想讓內容指定頁腳和頁眉的高度，即沒有像素高度。佈局應該是：logo ...全高（減去頁眉和頁腳）。＃photo-group ...全高（減去頁眉和頁腳）。類.pic-group應使每張照片的＃photo-group的30％。目前，除非我在.pic-group類上創建像素高度，否則不顯示圖像。我想做什麼，我錯過了一些明顯的東西？設置基於像素的高度將'侮辱'我的嘗試流暢的佈局。瞭解基於百分比的div和響應式設計

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

來源

2015-01-09 Leslie

你需要明確在一個div上設置height，使其填寫其offsetparent的可用高度。在這種情況下，身體。 Div元素是塊元素。這意味着默認情況下它們佔據了offsetparent的可用寬度。高度默認設置爲自動。這意味着當div內的內容被換行時，它會增加。

然而，你希望你的divs佔用身體的所有空間。但身體不是#home divs的偏移量。

Offsetparents：

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

但在#home-container你沒有設置高度和設置位置相對。所以這成爲所有子div的base。將它們的高度設置爲相對於此div的。因此在0上設置30%結果爲0。當然明確設置300px作品。這讓我們的#home的內容溢出其父。

來源

2015-01-09 23:44:20 Mouser

您的回覆以多種方式幫助我。我已經在html中包含了我需要的圖像，而不是作爲背景圖像。我是否正確地從您的答案中推斷出背景圖像不能被使用，除非高度被明確地設置在div鏈的某處？如果是這樣，那麼如何保持響應式設計的流體佈局（％）？ Java的？ – Leslie 2015-01-10 18:25:12

@萊斯利設置背景不會觸發高度。將它與現實生活進行比較。如果您將海報放入小照片列表中，則只會顯示海報的一部分，因爲尺寸不匹配。流體設計不是一個問題與CSS。你只需要設置正確的offsetparent與高度。如果你給'＃家容器'高度'100％'它應該給你結果。 – Mouser 2015-01-10 18:46:09

謝謝你的解釋。 – Leslie 2015-01-11 18:24:17

瞭解基於百分比的div和響應式設計

回答

相關問題