부모 div를 채우기 위해 div 높이를 늘리는 방법-CSS

107

아래와 같은 div가있는 페이지가 있습니다.

<div id="container">
    <div id="A">
    </div>
    <div id="B">
        <div id="B1"></div>
        <div id="B2">B2</div>
    </div>
    <div id="C"></div>
    <div id="D">
    </div>
</div>

스타일링으로;

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    margin-top: -35px;
    bottom: 0;
    background-color: #FFFFFF;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

B2전체 div B(녹색 테두리로 표시됨 )를 채우거나 늘리기 위해 div의 높이를 조정하고 바닥 글 div D를 교차하고 싶지 않습니다. 여기 작동하는 바이올린 데모 (업데이트 됨)가 있습니다. 어떻게 해결할 수 있습니까 ??

css

— 알프레드
소스

38

간단히 추가 height: 100%;에 #B2스타일. min-height필요하지 않아야합니다.

— 스노 버클
소스

4

dif가 비어 있으면 그럴 것입니다.

— x10

39

잘못된 대답 # B2는 #B만큼 키가 크지 만 요청한대로 나머지 공간을 채우기 위해 늘어나지 않습니다.

— 둥지

3

이것이 float부모 와 다른 div에서 작동하지 않습니까?

— 돈 치들

B1을 덮고 모든 공간을 차지합니다 ./

— mikus

1

이것은 분명히 작동하지 않습니다. height : 100 %는 컨테이너의 100 %입니다 (가장 자주 전체 뷰포트라고 생각합니다). 높이는 원하는 것 이상입니다.

— BT

25

당신이 가지고 있다고 가정

<body>
  <div id="root" />
</body>

일반 CSS를 사용하면 다음을 수행 할 수 있습니다. 작동하는 앱 https://github.com/onmyway133/Lyrics/blob/master/index.html보기

#root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

Flexbox를 사용하면 다음을 수행 할 수 있습니다.

html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}

— onmyway133
소스

10

http://jsfiddle.net/QWDxr/1/

"min-height"속성
사용 패딩, 여백 및 테두리에주의하십시오. :)

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    min-height: 100%;
    height: 100%;
    margin-top: -35px;
    bottom: 0;
    background-color: red;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

— x10
소스

1

아니 .. 전체 페이지를 위쪽 여백으로 채 웁니다. 나는 단지 특정 사업부를 채우고 싶다B

— Alfred

크롬과 파이어 폭스에서 제대로 작동합니다. 이것이 작동하지 않으면 Faux Columns를

— x10

작동하지만 바닥 글을 자르고 div id= D있습니다. 나는 DIV D 교차 싶지 않다

— 알프레드

2

height:100%#B2스타일에 세미콜론이 없습니다 .

— 에밀

5

내 목적에 적합한 것은 항상 전체 브라우저 창 내에 고정 된 양으로 제한되는 div를 만드는 것이 었습니다.

적어도 firefox에서 효과가 있었던 것은

<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">

실제 창을 강제로 스크롤하지 않는 한 div는 모든 크기 조정 중에 창 가장자리에 대한 경계를 유지합니다.

이것이 누군가 시간을 절약하기를 바랍니다.

— 레오 스미스
소스

5

스타일링 목적으로 B2를 사용하려면이 "해킹"을 시도해 볼 수 있습니다.

#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}

jsFiddle

— 테 네프
소스

1

작동합니다. 감사합니다. 그건 그렇고, margin-bottom: -9999px;. 마이너스가 누락되었습니다.

— Gaui

1

B2 컨테이너 위치 상대

나머지 높이의 상단 위치 B2 +

B2의 높이 + B1의 높이 또는 나머지 높이

— 드미트로 유르 첸코
소스

부모 노드를 상대적 위치로 설정하면 관련없는 문제가 해결되었습니다! 감사!

— Deejers

0

나는 height: stretch;. 여기에서 사용에 대한 세부 정보를 찾을 수 있습니다.

— Ihor
소스

-4

크기가 다를 수 있다면 자바 스크립트 솔루션 (jQUery)으로 해결할 것입니다.

window.setTimeout(function () {
    $(document).ready(function () {
        var ResizeTarget = $('#B');

        ResizeTarget.resize(function () {
            var target = $('#B2');
            target.css('height', ResizeTarget.height());
        }).trigger('resize');
    }); 
}, 500);

— NKCSS
소스

8

질문에 추가하고 싶을 수도 있습니다. :)

— NKCSS

48

javascript또는 jquery태그 가 없으면 충분하지 않습니까?

— kapa 2011

1

이것은 또한 완전히 불필요합니다. CSS는 지난 몇 년 동안 먼 길을 왔습니다. flex-box 및 calc ()를 확인하십시오.

— Shawn Whinnery 2015-04-30

1

Flexbox는 <IE10을 지원하지 않습니다 :(

— Constant Meiring

@ConstantMeiring 진짜 질문은 누구든지 <IE10에 관심이 있습니까? ;)

— Clonkex 2019 년