웹 사이트 레이아웃 행

다른 HTML 페이지의 프레임 역할을하는 웹 사이트를 만들고 있습니다. 내가 원하는 레이아웃은 사이트 제목과 섹션 내에 중첩 된 객체가있는 주요 부품 아래에 있습니다 (한 개만 표시되면이 구조가 중요하므로 두 개 이상 있어야합니다). 파이어 폭스에서 나는 원했던대로 그것을보고 있지만, 크롬에서는 "대상"이 100 % 높이로 퍼지지 않습니다.웹 사이트 레이아웃 행

강령 :

body { 
 
\t margin-left: 0%; 
 
\t margin-right: 0%; 
 
\t height: 100vh; 
 
\t margin-top: 0%; 
 
\t margin: 0 auto; 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t z-index: 0; 
 
} 
 

 
.site-title { 
 
\t height: 50px; 
 
} 
 

 
.main-menu { 
 
\t position: fixed; 
 
\t display: inline-block; 
 
} 
 

 
.main { 
 
\t height: auto; 
 
\t flex-grow: 1; 
 
\t display: flex; 
 
\t flex-direction: column; 
 
} 
 

 
section { 
 
\t border: 5px solid pink; 
 
\t color: #FFFFFF; 
 
\t overflow: hidden; 
 
\t flex-grow: 1; 
 
\t height: auto; 
 
} 
 

 
object { 
 
\t border: 5px solid #FFFFFF; \t 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <link rel="stylesheet" type="text/css" href="css/theme.css"> 
 
</head> 
 

 
<body> 
 
\t <div class="site-title"> \t 
 
\t \t <h1>Strawberry</h1> 
 
\t </div> 
 
\t 
 
\t <div class="main" id="main"> 
 
\t \t <section class="instance"> 
 
\t \t  <object data="home.html"></object> 
 
\t \t </section> 
 
\t </div> 
 
</body> 
 
</html>

출처

2016-12-20 John Ellis

저는 Chrome에 있습니다. 그것은 나를 위해 원하는대로 작동합니다. '.object'에'min-height : 100 %'를 추가하십시오. –

스 니펫이 비어있는 것처럼 보입니다. Btw 높이 100 %를 원한다면 html, body 등에서 시작하여 위의 모든 내용이 필요합니다. –

개체 요소는 자신의 높이와 너비 속성에 대한 백분율 값으로 지정할 수 없습니다 (픽셀 만 허용됩니다).

주의 사항 : 모든 부모 - : 또는 스타일 시트 (>object {height:100%} main.css가 예를) : 당신이 반응하는 솔루션을 가능하게하는 비율을 사용하려면

, 당신은 (<object style="height:100%">를 예를 들어) CSS 인라인와 객체를 바인딩 할 수 있습니다 객체의 요소도 100 %로 설정해야합니다.

출처

2016-12-20 20:20:24 ViseSystems

웹 사이트 레이아웃 행

답변

관련 문제