같은 높이 divs?

-1

<div class="container"> 
    <div class="sectionA"> 
    </div> 
    <div class="sectionB"> 
    </div> 
</div>

섹션 A 섹션 B는 파란색 배경이 빨간색 배경을 가지고있다.

섹션 A에는 많은 텍스트가 포함되어있어 매우 크고, 섹션 B에는 많은 텍스트가 없습니다.

섹션 A와 섹션 B가 부모와 동일한 높이가되도록하려면 어떻게해야합니까?

출처

2013-05-04 panthro

부모와 같은 높이를 의미합니까? 각각은 높이가 있고 부모는 양쪽 높이의 합계를가집니다. 너 뭐야? –

부모와 같은 높이 또는 A와 B의 높이와 같은 높이? – JJJ

부모가 컨테이너입니다. – panthro

예, 자녀에게 부모와 동일한 높이를 부여 할 수 있습니다. 이것은 작동합니다 :

<html> 
<head> 
</head> 
<body> 

<div class="container"> 
    <div class="sectionA">Lorem ipsum dolor sit amet. 
    </div> 
    <div class="sectionB">Lorem ipsum dolor sit amet. 
    </div> 
</div> 

</body> 
</html>

CSS의 :

.container{height:200px;width:500px;overflow:hidden} 
.sectionA{position:relative;float:left;width:250px;background:blue;height:100%} 
.sectionB{position:relative;float:left;width:250px;background:red;height:100%}

출처

2013-05-04 16:01:33

당신이 jQuery를 사용하는 방법에 대한 마음을 해달라고하면,

$('.sectionB').css('height', $('.sectionA').outerHeight());

sectionB CSS의 높이가 sectionA outerHeight에 의해 설정된다.

출처

2013-05-04 16:13:23

this jsbin을 살펴보십시오.

희망이 도움이됩니다.

출처

2013-05-04 16:20:52 cortex

동적으로이 작업을 수행하려면 jquery/javascript를 사용해야 처리해야합니다. 그렇지 않으면 height 속성을 사용할 수 있습니다. 두 섹션 모두에 적합한 가장 높은 값을 사용하십시오.

출처

2013-05-04 16:24:56 newday

<div> 및 CSS이 다음과 같은 추가 요소를 추가 포함하고의

한 가지 방법 사용하여 가짜 열 효과 :

<div class="container"> 
    <div class="backdrop"></div> 
    <div class="sectionA"> 
     <p>Text of A... can be on a red background.</p> 
     <p>Lorem ipsum dolor... and long text block.</p> 
    </div> 
    <div class="sectionB"> 
     <p>Text of B... can be on a blue background.</p> 
    </div> 
</div>

내가 추가 요소 <div class="backdrop">를 추가 하겠어을하는 당신을 원하는 경우 의사 요소로 대체 할 수 있습니다.

.container { 
    overflow: hidden; 
    color: white; 
    background-color: red; 
    position: relative; 
} 

.sectionA { 
    float: left; 
    width: 48%; 
    padding: 1%; 
} 
.sectionB { 
    float: left; 
    width: 48%; 
    padding: 1%; 
    position: relative; 
    z-index: 2; 
} 

.backdrop { 
    position: absolute; 
    background-color: blue; 
    width: 50%; 
    height: 3000px; 
    top: 0; 
    left: 50%; 
    z-index: 1; 
}

부모 .container 소자 overflow: hiddenposition: relative과 함께 왼쪽 컬럼 (레드)에 대한 배경 컬러를 주어진다 다음

적절한 CSS이다.

두 개의 하위/열 요소는 float: left을 사용하여 배치되며 상대 너비는 48 %이고 채우기는 1 %입니다 (필요에 따라 이러한 측정을 조정할 수 있음).

마지막으로 .backdrop은 절대적으로 배치되어 상위 컨테이너의 오른쪽에 배치됩니다. 높이가 높도록 설정하여 두 열의 예상 높이를 초과하지 않도록하고 background-color: blue을 선언하십시오.

플로트 된 .sectionB을 .backdrop 위에 칠하려면 z-index을 사용하십시오. Z- 인덱스 값이 적용되도록 상대적으로 위치를 .sectionB으로 설정해야합니다.

.container은 overflow:hidden을 사용하므로 키가 큰 배경 요소가 잘려서 원하는 효과를 낼 수 있습니다.

도 사용할 수 있습니다. 빨간색과 파란색으로 배경 이미지를 만들고, 위쪽과 중앙으로 세로로 바둑판 식으로 배열 할 수 있습니다. 너비가 예상 된 페이지 너비를 수용 할 수있을 정도로 넓게 만 만들면됩니다.

div.backdrop의 주된 장점은 배경 이미지를 변경하지 않고 CSS 속성만으로 색 구성표를 변경할 수 있다는 것입니다.

바이올린 데모 : http://jsfiddle.net/audetwebdesign/yejss/

출처

2013-05-04 21:54:43

같은 높이 divs?

답변

관련 문제