div가 전체 높이를 확장하려면
div를 전체 높이로 확장하는 데 사용할 수있는 방법이 있습니까? 나는 그것에 끈적한 바닥 글도 있습니다.
다음은 웹 페이지입니다. 웹 사이트가 삭제되었습니다 . 제가 말하는 중간 부분은 CSS 값이있는 중간 콘텐츠 인 흰색 div입니다.
.midcontent{
width:85%;
margin:0 auto;
padding:10px 20px;
padding-top:0;
background-color:#FFF;
overflow:hidden;
min-height:100%;
max-width:968px;
height:100%;
}
네, 분명히 height:100%작동하지 않았습니다. 또한 모든 상위 컨테이너에는 높이가 설정되어 있습니다.
일반적인 구조는 다음과 같습니다.
<body>
<div id="wrap">
<div id="main">
<div class="headout">
<div class="headimg"></div>
</div>
<div class="midcontainer"></div>
</div>
</div>
<div id="footer">
<div class="footer"></div>
</div>
CSS에서 html 및 body 태그의 높이를 설정 한 것을 기억하십니까? 이것은 일반적으로 DIV를 전체 높이로 확장하는 방법입니다.
<html>
<head>
<style type="text/css">
html,body { height: 100%; margin: 0px; padding: 0px; }
#full { background: #0f0; height: 100% }
</style>
</head>
<body>
<div id="full">
</div>
</body>
</html>
도움이 될 수 있습니다. http://www.webmasterworld.com/forum83/200.htm
관련 인용문 :
Most attempts to accomplish this were made by assigning the property and value: div{height:100%} - this alone will not work. The reason is that without a parent defined height, the div{height:100%;} has nothing to factor 100% percent of, and will default to a value of div{height:auto;} - auto is an "as needed value" which is governed by the actual content, so that the div{height:100%} will a=only extend as far as the content demands.
The solution to the problem is found by assigning a height value to the parent container, in this case, the body element. Writing your body stlye to include height 100% supplies the needed value.
html, body { margin:0; padding:0; height:100%; }
This is an old question. CSS has evolved. There now is the vh (viewport height) unit, also new layout options like flexbox or CSS grid to achieve classical designs in cleaner ways.
if setting height to 100% doesn't work, try min-height=100% for div. You still have to set the html tag.
html {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
}
#fullHeight{
width: 450px;
**min-height: 100%;**
background-color: blue;
}
참고URL : https://stackoverflow.com/questions/4535983/for-div-to-extend-full-height
'Program Club' 카테고리의 다른 글
| Unity 2.0 : ResolverOverride와 함께 Resolve를 사용하는 방법? (0) | 2020.11.19 |
|---|---|
| 사후 증가 및 사전 증가 개념? (0) | 2020.11.19 |
| 내 npm 모듈은 Mac OS X에서 어디에 설치해야합니까? (0) | 2020.11.19 |
| 모든 열거 형 값을 배열로 가져옵니다. (0) | 2020.11.19 |
| Python에서 함수 호출의 실행 시간을 제한하는 방법 (0) | 2020.11.19 |