gpt4 book ai didi

javascript - 定高容器如何分成80%和20%

转载 作者:太空宇宙 更新时间:2023-11-03 22:23:51 27 4
gpt4 key购买 nike

我有一个固定位置容器,我想把它分成两半,i,e

80%20% 底部

这样我应该看起来像这样:

enter image description here

注意:它应该在窗口调整大小时自行调整

here是代码笔:

这是我尝试过的:

#wrapper {
padding-left: 0;
transition: all 0.5s ease;
height: 100%;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 200px;
height: 80%;
margin-left: -250px;
overflow-y: auto;
background: rgba(0,0,0,0.9);
transition: all 0.5s ease;
border: 3px solid red;
color:white;
}
.stories-preview-wrapper{
height: 20%;
border:3px solid green;
width:210px;
}
    <div id="wrapper" class="toggled hidden-xs">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</div>
<div class="stories-preview-wrapper">
<ul class="sidebar-nav">
<li>hello world 2</li>
<li>hello world 2</li>
</ul>
</div>
</div>

最佳答案

看看:

#wrapper {
padding-left: 0;
transition: all 0.5s ease;
height: 100%;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 210px;
height: calc(80vh - 6px); /* As you give a border of 3px */
overflow-y: auto;
background: rgba(0,0,0,0.9);
transition: all 0.5s ease;
border: 3px solid red;
color:white;
}
.stories-preview-wrapper{
position: fixed;
height: calc(20vh - 6px); /* As you give a border of 3px */
bottom: 0;
left: 0;
border: 3px solid green;
width: 210px;
}
<div id="wrapper" class="toggled hidden-xs">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</div>
<div class="stories-preview-wrapper">
<ul class="sidebar-nav">
<li>hello world 2</li>
<li>hello world 2</li>
</ul>
</div>
</div>

关于javascript - 定高容器如何分成80%和20%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52429902/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com