부모 높이를 지정하지 않고 자식 div가 부모 div 높이의 100%가 되도록 강제하는 방법은 무엇인가요?

다음과 같은 구조의 사이트가 있습니다:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

내비게이션은 왼쪽에 있고 콘텐츠 div는 오른쪽에 있습니다. 콘텐츠 div의 정보는 PHP를 통해 가져오는 것이므로 매번 다릅니다.

어떤 페이지가 로드되더라도 내비게이션의 높이가 콘텐츠 div의 높이와 같도록 세로로 크기를 조정하려면 어떻게 해야 하나요?

TylerH
편집된 질문3일 1월 2019 в 8:20
프로그래밍
html css
13일 7월 2009 в 10:14
12 파운드
질문에 대한 의견 (2)

부모에 대한:

display: flex;

일부 접두사, http://css-tricks.com/using-flexbox/ 추가해야 합니다.

편집: 가너는 항목에서와 맞추십시오. @adam 것으로 전망했다. 스트레치하는. 필요하지 않습니다. 또한 사용 방법은 부모, 아이들 말고, 스케쳐내 스트레치할 하였더뇨 정의하십시오 자체 맞추십시오. 사용합니다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}
<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

끝 - &lt 스니핏 >;!

Aiphee
편집된 답변19일 6월 2019 в 8:03
해설 (8)
해결책

참고: 이 답변은 Flexbox 표준을 지원하지 않는 레거시 브라우저에 적용됩니다. 최신 접근 방식은 https://stackoverflow.com/a/23300532/1155721 을 참조하세요.

브라우저 간 CSS와 해킹이 없는 동일한 높이 열]1을 살펴보는 것이 좋습니다.

기본적으로 브라우저 호환 방식으로 CSS로 이 작업을 수행하는 것은 사소한 일이 아니므로(테이블에서는 사소한 일이지만) 적절한 사전 패키지 솔루션을 찾아보세요.

또한 100% 높이 또는 동일한 높이를 원하는지 여부에 따라 답이 달라집니다. 보통은 같은 높이입니다. 100% 높이인 경우에는 답이 약간 달라집니다.

csvan
편집된 답변17일 7월 2017 в 11:06
해설 (2)

답답한 것은 이 문제를 처리해 that& # 39 의 디자이너 all the time. 재주 있는 높이 바디입니다 CSS 와 HTML 에 대한 100% 로 설정해야 합니다.

html,body {
    height:100%;
}

이 코드는 브라우저에 대한 100%, 어떤 정의하십시오 무의미한 것으로 보인다. 답답한 것은, 있음-그러나 은 가장 간단한 방법은.

해설 (3)

내가 찾을 수 있는 두 개의 열이 설정 '디스플레이: 대신 ',' 표에서 float: 왼쪽, '효과적입니다.

John
편집된 답변9일 11월 2015 в 9:36
해설 (6)

콘텐츠 디비가 예기치 않게 짧아지는 경우 내비게이션 디비가 잘리는 것이 신경 쓰이지 않는다면 적어도 한 가지 쉬운 방법이 있습니다:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

또는 '가짜 열'의 개념에 대한

해설 (4)
#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}
해설 (3)

jquery 를 사용하여.

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});
해설 (3)

때문에 시도하시겠습니까 아래 여백을 100% 였다.

margin-bottom: 100%;
해설 (2)
 
#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

Look at [이 예] (https://jsfiddle.net/ykzot63e/2/).

해설 (1)

오랜 기간 외에는 아무 것도 내 문제 해결, 검색 및 시도하시겠습니까

style = "height:100%;"

div 에 하였더뇨

이 기본 적용 및

.parent {
    display: flex;
    flex-direction: column;
}

또한 사용하고 있는 응답성의 가져다줄래요 손상됨 부트스트랩과 이 않았다.

Hakan Fıstık
편집된 답변3일 3월 2018 в 1:45
해설 (1)

'높이: 모두 준비되어 있는 경우에만 사용할 수 있는 '&lt, percent&gt, 부모 노드를 지정된 퍼센트 고정된 높이가 ems 등을 높이 (픽셀) 의 최고 수준. 높이가 이쪽요 거역한다면 케스케이드 다운되어도 데이터베이스에구성원을 요소.

앞에서 설명한 대로 요소를 @Travis 지정할 수 있습니다, 몸의 100% 가 html 페이지 높이 캐스케이딩이란 다운되어도 데이터베이스에구성원을 노드입니다.

해설 (0)

기사 내가 설명하는 방법에 따라 이 hotenough. 트리스 동적임 해결책:

  • Html:*

<! - 모든 언어: &gt html 로 -;

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>
  • Less:*
/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}
해설 (0)

추가 '디스플레이: 모 격자선 '

해설 (1)

39 의 것은 시간 문제 때문에 그러니까말이야 it& 루옹 요청되었습니다 쉬운 사람이 할 수 있지만, I found it 솔루션 및 돌아보 사용하여 (정말 미안하다 가난한 영어). 자 발표한다.

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

간단한 예제. 선반가공 salesforce. 응답성의 수 있습니다.

해설 (1)

내 해결책:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});
Sunil Garg
편집된 답변20일 4월 2018 в 9:31
해설 (0)
  • 이 답이 CSS 를 CSS 및 격자선 creditbank. 구현됩니까 플렉상자 이후 더 이상 적합하지 않음. 하지만 여전히 apc® 솔루션 *

아마도 적은 스크린일 col1, col2 및 col3 너회들 보관할 때 자동 높이 쌓인 채널이어야 있다.

그러나 미디어 후 서로 옆에 있는 높이 비유하 표시되려면 정지점을 쿼리하지 열 싶은 모든 열.

예를 들어 1125년 px 그녀의심장을 모두 만들 수 있는 유일한 창을 열 설정되었습니다 정지점을 너버 후 같은 높이로.

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

물론 더 할 필요가 있을 때 중단점을 설정할 수 있습니다.

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            let vraperH = $('.wraper').height();
            if (window.innerWidth>= 1125) {
              $('.col1').height(vraperH);
              $('.col2').height(vraperH);
              $('.col3').height(vraperH);
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>
DevWL
편집된 답변4일 5월 2019 в 10:25
해설 (0)

There is a, s # 39 는 조금 체계 내에서 question& 제목 및 내용. 제목이 말하는 것처럼 느낄 수 있지만, 이 문제는 div 상위 두 형제 같은 높이로 (탐색 및 내용) 를 사용할 수 있습니다.

둘다 들어보겠소 (a) 탐색 및 컨텐츠 수 주 또는 (b) 의 100% 스맥랜드의 탐색 및 콘텐츠 같을 수 높이 높이?

39, ll solaris. (b), 내가 그렇게 i& .if don& # 39, 그렇게 할 수 없는 것 같습니다 할 때 현재 페이지 구조 (최소한 함께 있지 않고, CSS 순결케 스크립팅하는). 아마도 같은 일을 할 수 있습니다.



         </div>
    </div>
</div>

설정할 수 있는 모든 탐색 컨텐츠 div 왼쪽 여백에 너비입니다 창뿐만 있다. # 39 의 오른쪽에 있는 content& 이쪽요 설정할 수 있습니다 컨텐츠의 검색 및 탐색 div 스크램블된 content& # 39 의 100% 의 높이이다.

편집: # 39 m, 이렇게 하면 아마도 완전히 머릿속에 i& 확장하지만 div& # 39 의 왼쪽 여백에 이동줄에 설정할 필요가 있다 맞추기바인딩 제외어 값이거나 it& 설정되었습니다 # 39 의 절대 지지 0 으로 다시 왼쪽 맨 왼쪽. 문제는 이 방법에는 여러 가지가 있을 수 없지만 모든 브라우저에서 호환되어야 당기십시오 오프하도록 모두야 할 것 같습니다.

해설 (0)

난 이미 이 같은 문제를 협력했습니다 학암 Fostok& # 39 라고 I& # 39 의 기반으로 만든 작은 들어 있는데, 경우에 따라서는 추가 없이 작동할 수 있습니다 "'디스플레이: flex, "'와' 'flex 방향선이: "'를 모피쳐 컨테이너입니다 열. &lt br/>;

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

https://jsfiddle.net/builo/o7f43x0L/11/";;;; a href = &quot &lt &gt JSFiddle&lt /a&gt.

해설 (0)

&gt. 이 전략은 작동합니다. 최종 사용자 섹선에서 추가에는 HTML 요소 &gt. 모두, 스타일을 가진 선택해제합니다: &gt. &gt. div <;;;;;; /div&gt &lt &gt &quot 모두 스타일 = &quot 선택해제합니다: &gt. &gt. 전에 모든 포함할 높이.

해설 (1)

[다른 답변에서 Dmity의 Less 코드 참조] 이것이 일종의 "의사 코드"인 것 같다고 생각합니다.

내가 이해하는 바에 따르면 트릭을 수행해야하는 가짜 열 기법을 사용해보십시오.

http://www.alistapart.com/articles/fauxcolumns/

도움이 되길 바랍니다 :)

해설 (2)