容器的高度不隨內容改變

Question

我有一個引導站點，我的div無法放入容器中，div與容器高度重疊。 Div有一個屬性position: fixed是否可以將其position: fixed在容器中？

碼：

 .container{ width: 92%; padding: 0; clear: both; } .row { margin-right: 50px; margin-left: 50px; } .row:before, .row:after{ content: " "; display: table; } .container:before, .container:after{ content: " "; display: table; } .row:after{ clear: both; } .container:after { clear: both; } .col-md-3{ background-color: #e2e2e2; position: fixed; left: 0; right: 0; width: 21%; padding: 0; top: 72px; border-radius: 5px; z-index: 1040; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="row container"> <div class="col-md-3"> //More code </div> </div> 

Answer 1

代替position:fixed ，嘗試使用position:absolute並position: relative對於容器應用position: relative ：。 現在，您可以相對於內容定位元素。

當您應用position:fixed ，將根據body標簽對其進行定位。

Answer 2

編號。位置：固定使元素相對於瀏覽器窗口固定。 它完全忽略了其容器位置。 您可以嘗試位置：絕對代替。

Answer 3

這可能會有所幫助

 .container { border:1px; border-style:solid; width:250px; background-color:white; height:250px; padding: 5px; } .col-md-3 { position:relative; padding:5px; height:100%; width:100%; border:1px; background-color:#ccffcc; border-style:solid; box-sizing: border-box; } 

 <div class="row container"> <div class="col-md-3"> <p>some code here</p> </div> </div>