나는이 같은 일반적인 레이아웃을 가진 웹 응용 프로그램에서 일하고 있어요 :DIV의 높이를 Javascript없이 뷰포트의 아래쪽으로 설정하는 방법은 무엇입니까?
주요 내용 영역은 뷰포트의 하단을 넘어 확장합니다. 사용자가 버튼을 클릭하여 열 수있는 사이드 탐색 메뉴가 있습니다. 내 질문은 측면 nav 높이를 뷰포트 바닥까지 확장시키는 영리한 방법이 있습니까? 나는 내가 뷰포트의 높이를 계산하고 헤더와 서브 헤더 높이를 빼내 야하는 javascript로이 작업을 수행 할 수 있다는 것을 알고있다 ... 더 쉬운 방법이 없다면 궁금 할까?
이브, 일반적으로 우리는 이렇게 우리가 매우 우아하지 않고 휴식 할 수있는뿐만 아니라 몸과 HTML에 100 %의 높이를 추가하지 않는
#elem{
height: 100%;
}
그러나이 작동하지 않습니다 나머지 디자인. vh로 매우 쉽습니다. 높이를 100vh로 설정하면 창처럼 항상 높을 것입니다.
#elem{
height: 100vh;
}
요즘 트렌디 한 전체 화면 영웅 이미지에 적합합니다.
참고 :이 도움이 http://tutorialzine.com/2015/05/simplify-your-stylesheets-with-the-magical-css-viewport-units/
희망!
이 질문에 이론적으로 대답 할 수 있지만 답변의 핵심 부분을 여기에 포함시키고 참조 할 수있는 링크를 제공하는 것이 좋습니다 ** (// meta.stackoverflow.com/q/8259). 연결된 페이지가 바뀌면 링크 전용 답변이 무효화 될 수 있습니다. –
Paulie_D ... –
@JoelHernandez -이 기능이 저에게 도움이 될지 잘 모르겠습니다. 내 nav 'div'를 100vh로 설정하면 높이를 뷰포트의 100 %로 설정하지만, 높이를 표준 레이아웃 위치의 맨 아래에서부터 뷰포트의 아래쪽으로 설정하면됩니다. Flexbox는 @Paulie_D 또는 javascript가 최고의 솔루션이라고 생각합니다. –
calc()을 사용하고 100vh에서 헤더 및 부제목 높이를 빼면됩니다. 예를 들면 다음과 같습니다.
height: calc(100vh - 200px);
헤더 및 부제목에 고정 된 높이가 없기 때문에이 기능이 작동하지 않습니다. –
헤더와 하위 머리글의 높이가 고정되어 있으면 이와 같은 방법을 시도해 볼 수 있습니다. 예를 들어 둘 다 높이가 50 픽셀이라고 가정 해 보겠습니다.
#side-nav {
height: calc(100vh - 100px)
}
머리글 및 부제목 높이가 고정되어 있지 않습니다. –
다음은 flex 속성을 사용한 예입니다. flex를 사용하여 레이아웃을 모르는 경우 here's a great example. 그냥 flex: 0 auto;에 display: flex;에 용기와 측면 탐색을 설정 : 당신은 그것의 더 나은 오히려 CSS를 사용하는 단독 CSS로이 템플릿을 수정할 수 있습니다
.header,
.subheader {
background: #5b5;
width: 200px;
height: 50px;
margin: 0 auto;
text-align: center;
}
.header {
background: #5b5;
}
.subheader {
background: #292;
}
.content {
width: 200px;
margin: 0 auto;
display: flex;
}
.nav {
flex: 0 auto;
width: 25%;
background: #55b;
float: left;
height: inherit;
}
.main {
width: 75%;
background: #449;
float: right;
}<div class="header">Header</div>
<div class="subheader">Subheader</div>
<div class="content">
<div class="nav">side nav</div>
<div class="main">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>네비게이션'div'를'height : 100 %'로 설정하면 동일한 레이아웃을 얻을 수 있습니다.이 경우 메인 콘텐츠'div'와 동일한 높이가됩니다. 난 그냥 탐색의 높이를 주요 콘텐츠 영역의 하단이 아닌 뷰포트의 바닥까지 확장하고 싶습니다. –
이 이봐, 난이 솔루션을 도울 수 js보다.
SOLUTION
된 HTML이있다 ..
<html>
<link rel="stylesheet" href="style.css"/>
<body>
<header class="border"><h1>Header</h1></header>
<section class="sub-header border"><h2>Sub header</h2></section>
<div class="side-menu border">
<div class="menu-head"><h3>Menu heading</h3></div>
<div class="menu-items ">
<p>Menu items 1</p>
<p>Menu items 2</p>
<p>Menu items 3</p>
<p>Menu items 4</p>
</div>
</div>
<div class="main-content border">
<p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
</div>
</body>
</html>
CSS이다 ..
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: auto;
}
.border{
border: 1px solid #000;
}
header{
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
background: #ea4242;
}
.sub-header{
text-align: center;
position: fixed;
left: 0;
top: 39px;
width: 100%;
background: #d46b6b;
}
.side-menu{
width: 240px;
position: fixed;
left: 0;
top: 68px;
height: 89%;
}
.menu-head{
width:100%;
text-align: center;
padding: 12px 0;
background: #96a2ff;
}
.menu-items{
height: 100%;
}
.menu-items p{
padding: 20px 10px;
border-bottom:1px solid #777;
}
.main-content{
height: 1900px;
width: calc(100% - 252px);
margin-left: 240px;
margin-top: 66px;
background: #fdefa9;
padding: 0 0px 0 10px;
}
이 시도가 정장 당신에게 가장 좋은 방법
을 것이다
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: auto;
}
.border{
border: 1px solid #000;
}
header{
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
background: #ea4242;
}
.sub-header{
text-align: center;
position: fixed;
left: 0;
top: 39px;
width: 100%;
background: #d46b6b;
}
.side-menu{
width: 240px;
position: fixed;
left: 0;
top: 68px;
height: 89%;
overflow:auto;
overflow:auto;
}
.menu-head{
width:100%;
text-align: center;
padding: 12px 0;
background: #96a2ff;
}
.menu-items{
height: 100%;
}
.menu-items p{
padding: 20px 10px;
border-bottom:1px solid #777;
}
.main-content{
height: 1900px;
width: calc(100% - 252px);
margin-left: 240px;
margin-top: 66px;
background: #fdefa9;
padding: 0 0px 0 10px;
}<header class="border"><h1>Header</h1></header>
<section class="sub-header border"><h2>Sub header</h2></section>
<div class="side-menu border">
<div class="menu-head"><h3>Menu heading</h3></div>
<div class="menu-items ">
<p>Menu items 1</p>
<p>Menu items 2</p>
<p>Menu items 3</p>
<p>Menu items 4</p>
</div>
</div>
<div class="main-content border">
<p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
</div>
참조 - http://stackoverflow.com/questions/90178/make-a-div-fill- 나머지 화면 공간의 높이 rq = 1 –
좋은 링크 @Paulie_D ... 나는 flexbox 접근 방식을 사용하지 않을 것이라고 생각했습니다. –