백분율 기반 divs 및 반응 형 디자인 이해

HTML 및 본문 너비와 높이를 100 %로 설정했습니다. 내 배경 이미지를 표시 할 수있을만큼 충분하지 않은 이유는 무엇입니까 (# home1, # home2, # home3)? 이것은 모든 div가 높이를 기준으로 삼을 픽셀을 설정하지 않습니까? 꼬리말과 머리글의 높이, 즉 픽셀 높이를 지정하는 내용을 원합니다. 레이아웃은 로고 : 전체 높이 (머리글과 바닥 글 제외) 여야합니다. # photo-group ... 전체 높이 (머리글과 바닥 글 제외). 클래스 .pic-group은 각 사진을 # 사진 그룹의 30 %로 만들어야합니다. 현재 .pic-group 클래스의 픽셀 높이를 지정하지 않으면 이미지가 표시되지 않습니다. 내가하고 싶은 일이 가능하고 분명한 것을 놓쳤습니다. 픽셀 기반 높이를 설정하면 유체 레이아웃에서 내 시도가 '모욕'됩니다. 당신이 필요로하는백분율 기반 divs 및 반응 형 디자인 이해

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

명시 적으로는 offsetparent의 사용 가능한 높이를 작성하기 위해 사업부에 height을 설정합니다. 이 경우에는 시체. Div 요소는 블록 요소입니다. 즉, 기본적으로 offsetparent의 사용 가능한 너비를 차지합니다. height는 기본적으로 auto로 설정됩니다. 즉, div 내부의 내용이 줄 바꿈 될 때 증가합니다.

그러나 div가 몸에서 모든 공간을 차지할 것으로 예상됩니다. 하지만 몸은 #home div의 오프셋 된 부모가 아닙니다.

Offsetparents :

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

그러나 #home-container에 당신이 높이를 설정하고 상대의 위치를 설정하지 않았습니다. 따라서 모든 하위 div에 대해 base이됩니다. 이 높이에 을 설정하면이 부문에 상대적으로이됩니다. 따라서 30%을 0에 설정하면 0이됩니다. 물론 명시 적으로 300px을 설정하면됩니다. 이것으로 #home의 내용이 부모를 오버플로합니다.

출처

2015-01-09 23:44:20 Mouser

귀하의 답변은 여러 가지면에서 도움이되었습니다. 배경 이미지 대신 html로 필요한 이미지를 포함 시켰습니다. 높이가 div의 체인에서 명시 적으로 '어딘가에'설정되어 있지 않으면 배경 이미지를 사용할 수 없다는 답을 유추 할 수 있습니까? 그렇다면 반응 형 디자인을 위해 유체 레이아웃 (%)을 어떻게 유지합니까? 자바? – Leslie

@Leslie 배경을 설정해도 높이가 나타나지 않습니다. 실생활과 비교하십시오. 포스터를 작은 사진 목록에 넣으면 크기가 일치하지 않기 때문에 포스터의 일부만 표시됩니다. 유체 설계는 CSS에서 문제가되지 않습니다. 높이가있는 올바른 오프셋 부모 만 설정하면됩니다. '# home-container' 높이에'100 %'를 지정하면 결과를 얻을 수 있습니다. – Mouser

설명해 주셔서 감사합니다. – Leslie

백분율 기반 divs 및 반응 형 디자인 이해

답변

관련 문제