如何填充父身高？
[英]How to fill parent height?
問題描述
這是我的代碼：
.solid_color{ background-color: gray; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div> <div class="solid_color col-xs-3"></div> <div class="col-xs-9"> " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> " <i>(Quote from someone)</i> </div> </div>
目前div.solid_color是一條線。 它的高度應該與相鄰元素的高度相同。 我怎樣才能做到這一點？
4 個解決方案
解決方案1
4 2017-10-28 13:45:14
你可以用Flexbox 做到：
.parent { display: flex; /* reason: "align-items: stretch" which makes flex-items of equal height by default, obviously they all take the height of the "tallest" one */ } .solid_color { background-color: gray; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="parent"> <div class="solid_color col-xs-3"></div> <div class="col-xs-9"> " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> " <i>(Quote from someone)</i> </div> </div>
解決方案2
1 2017-10-28 13:42:20
您可以通過 JS 僅使用選擇器並使用getBoundingClientRect找到所需的高度。
var height = document.querySelector('.col-xs-9').getBoundingClientRect().height; document.querySelector('.solid_color').style.height = height + 'px';
.solid_color{ background-color: gray; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div> <div class="solid_color col-xs-3"></div> <div class="col-xs-9"> " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> " <i>(Quote from someone)</i> </div> </div>
解決方案3
0 2017-10-28 13:39:51
添加display: flex; 在您的父容器中並刪除height: 100%; 從子div。
.solid_color{ background-color: gray; } .myparent{ display: flex; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="myparent"> <div class="solid_color col-xs-3"></div> <div class="col-xs-9"> " <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> " <i>(Quote from someone)</i> </div> </div>
希望這有幫助
解決方案4
0 2017-10-28 14:05:15
我會給帶有背景顏色的 div 一個絕對位置，並將帶有一些邊距的文本推到 div 上。 見下面的代碼：
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<style>
.solid_color {
position: absolute;
left: 0;
top: 0;
width: 25%;
height: 100%;
background-color: gray;
}
.outer {
position: relative;
float: left;
display: block;
width: 100%;
}
.right-text {
margin-left: 25%;
}
</style>
</head>
<body>
<div class="outer">
<div class="solid_color col-xs-3"></div>
<div class="right-text col-xs-9">
" <span>A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone A sentence from someone</span> "
<i>(Quote from someone)</i>
</div>
</div>
</body>
</html>
如何設置高度以在 mui 數據表中使用粘性標題動態填充父 div
[英]How to set height to fill parent div dynamically with sticky header in mui-datatables
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.