适合内容高度的两个div

我有一个包含两个内部div（.title-div和.body-div）的div（.main-div）。它们必须适合两个方向的尺寸.main-div。适合内容高度的两个div

.title-div的固定高度为25px。

有时可以隐藏.title-div。但是当我这样做时，我的.body-div上升，但不适合.main-div，因为它的高度属性是错误的。

我想我的.body-div总是适合其父

.main-div { 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: lightgray; 
 
    border: 1px solid black; 
 
} 
 
.title-div { 
 
    height: 25px; 
 
    width: 100%; 
 
    background-color: lightblue; 
 
} 
 
.body-div { 
 
    height: calc(100% - 25px); 
 
    width: 100%; 
 
    background-color: green; 
 
} 
 
/* from bootstrap*/ 
 

 
.hidden { 
 
    display: none !important; 
 
    visibility: hidden !important; 
 
}

<div class="main-div"> 
 
    <div class="title-div"> 
 
    title 
 
    </div> 
 
    <div class="body-div"> 
 
    body 
 
    </div> 
 
</div>

这里的可用空间是一个小提琴： https://jsfiddle.net/g8zef0ux/

任何想法？

来源

2016-03-18 lgm42

像这样https://jsfiddle.net/g8zef0ux/1/？ – Gintoki

试试flex-box，这已经被一遍又一遍地解释过了。 – Randy

[使一个div填充剩余屏幕空间的高度]的可能重复（http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-空间） – Randy

有几件事你可以做。这有两种可能的解决方案。

在我的第一个例子中，同时你隐藏了标题，我们正在为身体添加一个额外的类，使它更高。它会覆盖您的计算，并将高度设置为100％。

在第二个示例中，我们使用CSS3 Flexbox模块导致正文增长以填充所有可用空间。当标题在那里时，它不会成长，不会缩小，并保持在25px，身体填充其余部分。当标题消失时，身体填满整个空间。

$(".btn1").click(function() { 
 
\t $(".title-div1").toggleClass("hidden"); 
 
    $(".body-div1").toggleClass("body-div-noTitle"); 
 
}); 
 

 
$(".btn2").click(function() { 
 
\t $(".title-div2").toggleClass("hidden"); 
 
});

.main-div1 { 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: lightgray; 
 
    border: 1px solid black; 
 
} 
 

 
.title-div1 { 
 
    height: 25px; 
 
    width: 100%; 
 
    background-color: lightblue; 
 
} 
 

 
.body-div1 { 
 
    height: calc(100% - 25px); 
 
    width: 100%; 
 
    background-color: green; 
 
} 
 

 
.body-div-noTitle { 
 
    height:100%; 
 
} 
 

 
.main-div2 { 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: lightgray; 
 
    border: 1px solid black; 
 
    display:flex; 
 
    flex-direction:column; 
 
} 
 

 
.title-div2 { 
 
    flex: 0 0 25px; 
 
    width: 100%; 
 
    background-color: lightblue; 
 
} 
 

 
.body-div2 { 
 
    flex:1; 
 
    width: 100%; 
 
    background-color: green; 
 
} 
 

 
/* from bootstrap*/ 
 
.hidden { 
 
    display: none !important; 
 
    visibility: hidden !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main-div main-div1"> 
 
    <div class="title-div title-div1"> 
 
    title 
 
    </div> 
 
    <div class="body-div body-div1"> 
 
    body 
 
    </div> 
 
</div> 
 
<br> 
 
<br> 
 
<input class="btn1" type="button" value="Toggle title visibility" /> 
 

 
<div class="main-div main-div2"> 
 
    <div class="title-div title-div2"> 
 
    title 
 
    </div> 
 
    <div class="body-div body-div2"> 
 
    body 
 
    </div> 
 
</div> 
 
<br> 
 
<br> 
 
<input class="btn2" type="button" value="Toggle title visibility" />

来源

2016-03-18 13:46:13 i7nvd

你可以很容易地实现Flexbox实现这一目标。 https://jsfiddle.net/g8zef0ux/2/

.main-div { 
    height: 150px; 
    width: 150px; 
    display: flex; 
    flex-direction: column; 
    background-color: lightgray; 
    border: 1px solid black; 
} 

.title-div { 
    flex: 0 0 25px; 
    width: 100%; 
    background-color: lightblue; 
} 

.body-div { 
    flex: 1; 
    width: 100%; 
    background-color: green; 
}

来源

2016-03-18 13:46:48

从我想你问这里是解决方案：

https://jsfiddle.net/g8zef0ux/

我添加了一个检查，看它是否这样做包含隐藏的类：

if (!$(".title-div").hasClass('hidden')) { 
    $(".body-div").css('height', '100%').css('height', '-=25px'); 
    }else{ 
    $(".body-div").css('height', '100%'); 
    }

如果为true，则相应地调整高度。

来源

2016-03-18 13:53:59 Deckerz

适合内容高度的两个div

回答

相关问题