항목의 동적 높이, CSS로만 가능합니까?

레이아웃, 로그인 할 때 사용자가항목의 동적 높이, CSS로만 가능합니까?

LOGIN | news 
BOX | news 
------| news 
CHAT | news 
BOX | news 
CHAT | news 
BOX | news 
CHAT | news

기록되어 있지 않은 경우 :

CHAT | news 
BOX | news 
CHAT | news 
BOX | news 
CHAT | news 
BOX | news 
CHAT | news 
BOX | news

어떻게 든 "chatbox"는 "뉴스 박스"와 같은 높이로해야 권리 "와"로그인시 상자 "사용자가 로그인하면 밤은 볼

편집이 :.은"뉴스 박스 "고정 400 픽셀 heighted 여기

는 바이올린이다.

출처

2015-01-24 John Smith

당신은 jsfiddle 또는 펜을 제공 할 수있다? –

업데이트 됨, 바이올렛이 추가되었습니다. –

내 대답은 당신의 해결책입니다 !! – Mardzis

(210)는 로그인 및 chatbox 영역 주위에 상자를 설정하고 그것을 그 CSS 제공 :

http://jsfiddle.net/zo6vxcax/2/

출처

2015-01-24 16:00:47

. 이것은 jQuery 솔루션이지만 나는 그것을 원하지 않는다 ... http://jsfiddle.net/zo6vxcax/1/ –

오케이 미안하지만 질문이 더 많은 정보와 함께 있어야 할 수도있다 –

로그인 상자를 표시하지 않으려면 어떻게해야합니까? 로그인 후? PHP? –

어쩌면 당신의 대답 거기에 편집 된 바이올린에 같은

.outer{ 
height: 300px; 
    background-color: yellow; 
}

합니다. Live example on the jsFiddle

$('#l').click (function() { 
 
    $('#a1').toggle(); 
 
});

body, html { 
 
    height: 100%; 
 
} 
 
#a1 
 
{ 
 
    float: left; 
 
    height: 80px; 
 
    width: 100px; 
 
    background-color: red; 
 
} 
 
#b1 
 
{ 
 
    background-color: yellow; 
 
    width: 100px; 
 
    min-height: 100%; 
 
} 
 
#c1 
 
{ 
 
    float: left; 
 
    background-color: green; 
 
    overflow: hidden; 
 
    position: relative;  
 
    height: 300px; 
 
} 
 

 
.outer { 
 
    background: black; 
 
    float: left; 
 
    height: 300px; 
 
    max-height: 300px; 
 
    min-height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
<div id="a1">login FIXED HEIGHT</div> 
 
    <div id="b1">chatbox<br />chatbox<br /> MUST NOT EXCEED THE BOTTOM OF GREEN AREA and stretch until the bottom of green area</div> 
 
</div> 
 
<div id="c1"> 
 
    news<br />news<br />FIXED HEIGHT<input id="l" type="button" value="Toggle login box" /> 
 
</div>

출처

2015-01-24 21:44:04 Mardzis

항목의 동적 높이, CSS로만 가능합니까?

답변

관련 문제