我正在尝试在页面左侧创建一个侧边栏,内容位于右侧。我遇到的问题是,当我尝试将 div 设置为 100% 高度时,我必须将其设置为 position: absolute;这会导致内容与侧边栏重叠。
这是我的 HTML
<div class="row">
<div class="sidebar col-sm-3">
<ul>
<li class="active">
<h3><a href="">Link</a></h3>
</li>
<li class="">
<h3><a href="">Link</a></h3>
</li>
<li class="">
<h3><a href="">Link</a></h3>
</li>
<li class="active">
<h3><a href="">Link</a></h3>
</li>
</ul>
</div>
<!-- sidebar -->
<div class="sidebar-content col-sm-9">
<ul>
<li class="active">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
</ul>
</div>
<!-- sidebar-content -->
</div>
<!-- row -->
还有我的 CSS
.sidebar {
background: #eee;
height: 100%;
padding-top: 100px !important;
}
.sidebar-content ul li {
display: none;
}
.sidebar-content ul li.active {
display: block;
}
.sidebar-content {
position: relative;
right: 0;
padding: 100px;
}
谁能告诉我如何使 div 相对和 100% 高度或更好的方法来创建侧边栏?
fiddle :https://jsfiddle.net/3Lapzoyf/3/
最佳答案
解决方案:
添加 100vh
的 height
(这是一个长度单位,代表视口(viewport)高度的 1%)。这将导致侧边栏的 height
为视口(viewport)高度的 100%
。当您使用 Twitter Bootstrap 时,还要确保您的行位于 .container
或 .container-fluid
中(如果您还没有这样做的话)。
HTML:
<div class="container-fluid">
<div class="row">
<div class="sidebar col-sm-3">
<ul>
<li class="active">
<h3><a href="">Link</a></h3>
</li>
<li class="">
<h3><a href="">Link</a></h3>
</li>
<li class="">
<h3><a href="">Link</a></h3>
</li>
<li class="active">
<h3><a href="">Link</a></h3>
</li>
</ul>
</div><!-- sidebar -->
<div class="sidebar-content col-sm-9">
<ul>
<li class="active">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
</ul>
</div><!-- sidebar-content -->
</div><!-- row -->
</div>
CSS:
.sidebar {
background: #eee;
height: 100vh;
padding-top: 100px;
}
.sidebar-content ul li {
display: none;
}
.sidebar-content ul li.active {
display: block;
}
.sidebar-content {
padding: 100px;
position: relative;
right: 0;
}
fiddle : https://jsfiddle.net/3Lapzoyf/4/
关于html - 在 Bootstrap 中制作一个相对定位的 100% 高度的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35562371/