gpt4 book ai didi

css - 如何制作具有动态主要内容的全高侧边栏?

转载 作者:行者123 更新时间:2023-12-02 09:16:22 27 4
gpt4 key购买 nike

我有一个带有左侧边栏和动态主要内容的 angular2 应用。

HTML:

<body>
<div class="full_height">
<div class="sidebar">Some content</div>
<div class="main">Some dynamic content</div>
</div>
</body>

CSS:

body{
width: 100%;
height: 100%;
margin: 0;
}
.full_height{
display: flex;
flex-direction: row;
align-items: stretch;
}
.sidebar{
background: black;
color: white;
width: 150px;
flex: 0 0 auto;
}
.main{
flex: 1 1 auto;
}

如果主 block 中没有信息,我需要侧边栏增长到浏览器主体的 100% 高度。当大量信息通过 AJAX 加载到主 block 时,我需要侧边栏和主 block 具有相同的高度。

如何使第一部分工作?

JSFiddle

最佳答案

我认为您只是忘记为 HTML 元素指定 100% 的高度。这是您尝试做的吗?

html, body{
width: 100%;
height: 100%;
margin: 0;
}
.full_height{
display: flex;
flex-direction: row;
align-items: stretch;
height: 100%;
}
.sidebar{
background: black;
color: white;
width: 150px;
flex: 0 0 auto;
}
.main{
flex: 1 1 auto;
}
<body>
<div class="full_height">
<div class="sidebar">Some content</div>
<div class="main">Some dynamic content</div>
</div>
</body>

关于css - 如何制作具有动态主要内容的全高侧边栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46927850/

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