CSS 만 사용하여 HTML 요소가 나머지 화면 높이의 100 %를 어떻게 채울 수 있습니까?
헤더 요소와 콘텐츠 요소가 있습니다.
#header
#content
헤더는 고정 높이이고 콘텐츠는 화면에서 사용할 수있는 나머지 높이를 모두 overflow-y: scroll;.
Javascript없이 가능합니까?
이에 대한 트릭은 html 및 body 요소에 100 % 높이를 지정하는 것입니다. 일부 브라우저는 높이를 계산하기 위해 상위 요소 (html, body)를 찾습니다.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}
모든 대답을 잊어 버리십시오.이 CSS 줄은 2 초 만에 저에게 효과적이었습니다.
height:100vh;
1vh = 브라우저 화면 높이의 1 %
반응 형 레이아웃 크기 조정의 경우 다음을 사용할 수 있습니다.
min-height: 100vh
[2018 년 11 월 업데이트] 댓글에서 언급했듯이 최소 높이를 사용하면 반응 형 디자인에 문제가 발생하지 않을 수 있습니다.
[2018 년 4 월 업데이트] 댓글에서 언급했듯이 2011 년 질문을 받았을 때 모든 브라우저가 뷰포트 단위를 지원하지는 않았습니다. 다른 답변은 당시 솔루션 vmax이었습니다. IE에서는 여전히 지원되지 않으므로 아직 모두에게 최상의 솔루션이 아닐 수 있습니다.
실제로 가장 좋은 방법은 다음과 같습니다.
html {
height:100%;
}
body {
min-height:100%;
}
이것은 나를 위해 모든 것을 해결하고 바닥 글을 제어하는 데 도움이되며 페이지가 아래로 스크롤 되더라도 고정 바닥 글을 가질 수 있습니다.
기술 솔루션-편집 됨
역사적으로 '높이'는 가장 쉬운 '너비'에 비해 성형하기가 까다 롭습니다. CSS <body>는 스타일링이 작동하는 데 중점을 둡니다 . 위의 코드-우리가 준 <html>것과 <body>높이. 이것은 마술이 등장하는 곳입니다. 우리는 테이블에 '최소 높이' <body>가 <html>있기 때문에 브라우저 <body>에 최소 높이를 유지 하기 때문에 더 우월하다고 말하고 있습니다. 이것은 이미 높이가 이미 있기 때문에 <body>재정의를 허용 합니다 . 다시 말해서, 우리는 브라우저를 속여서 테이블에서 "범프"하도록하여 독립적으로 스타일을 지정할 수 있습니다.<html><html><html>
The accepted solution will not actually work. You will notice that the content div will be equal to the height of its parent, body. So setting the body height to 100% will set it equal to the height of the browser window. Let's say the browser window was 768px in height, by setting the content div height to 100%, the div's height will in turn be 768px. Thus, you will end up with the header div being 150px and the content div being 768px. In the end you will have content 150px below the bottom of the page. For another solution, check out this link.
With HTML5 you can do this:
CSS:
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}
HTML:
<header>blabablalba </header>
<section> Content </section>
You can use vh on the min-height property.
min-height: 100vh;
You can do as follows, depending on how you are using the margins...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
For me, the next worked well:
I wrapped the header and the content on a div
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
I used this reference to fill the height with flexbox. The CSS goes like this:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}
For more info about the flexbox technique, visit the reference
You can also set the parent to display: inline. See http://codepen.io/tommymarshall/pen/cECyH
Be sure to also have the height of html and body set to 100%, too.
The accepted answer does not work. And the highest voted answer does not answer the actual question. With a fixed pixel height header, and a filler in the remaining display of the browser, and scroll for owerflow. Here is a solution that actually works, using absolute positioning. I also assume that the height of the header is known, by the sound of "fixed header" in the question. I use 150px as an example here:
HTML:
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
CSS:(adding background-color for visual effect only)
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}
For a more detailed look how this works, with actual content inside the #Content, have a look at this jsfiddle, using bootstrap rows and columns.
In this instance I want my main content div to be liquid height so that the whole page takes up 100% of the browser height.
height: 100vh;
Unless you need to support IE 9 and below, I would use flexbox
body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }
You also need to get body to fill the whole page
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
CSS PLaY | cross browser fixed header/footer/centered single column layout
CSS Frames, version 2: Example 2, specified width | 456 Berea Street
One important thing is that although this sounds easy, there's going to be quite a bit of ugly code going into your CSS file to get an effect like this. Unfortunately, it really is the only option.
Very simple:
#content {
max-height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}
The best solution I found so far is setting a footer element at the bottom of the page and then evaluate the difference of the offset of the footer and the element we need to expand. e.g.
The html file
<div id="contents"></div>
<div id="footer"></div>
The css file
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
The js file (using jquery)
var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');
You might also like to update the height of the contents element on each window resize, so...
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});
Have you tried something like this?
CSS:
.content {
height: 100%;
display: block;
}
HTML:
<div class=".content">
<!-- Content goes here -->
</div>
'Programming' 카테고리의 다른 글
| SQL 열에서 문자 인스턴스를 계산하는 방법 (1) | 2020.08.19 |
|---|---|
| 버튼 배경색으로 내 버튼에 물결 효과를 추가 하시겠습니까? (0) | 2020.08.19 |
| Docker-Machine 메모리를 늘리는 방법 Mac (0) | 2020.08.19 |
| scrollview에 중력이 없습니다. (0) | 2020.08.19 |
| Android 알림이 표시되지 않음 (0) | 2020.08.19 |