我有一个包含两个元素的容器:一个搜索栏,和一个在它下面的表。在表格内部,我在左边有一个侧边栏,在右边有一些内容。容器有固定的高度,我希望侧边栏和内容垂直填充空间。
我可以让表格来填充空间,但不能让侧边栏和内容。这是我能得到的最接近的:
* {
font-family: "Poppins", sans-serif;
}
body {
background-size: 100%;
/*background-image: url('./images/diego-ph-5LOhydOtTKU-unsplash.jpg');*/
background-color: black;
background-repeat: "no-repeat";
background-position: 0 0;
color: aliceblue;
margin: 0;
padding: 0;
}
.projects-table {
border-style: solid;
border-radius: 1rem;
border-width: 0.25rem;
border-color: slategrey;
margin-top: 5rem;
padding: 1rem;
height: 20rem;
display: flex;
flex-direction: column;
}
.projects-table .search {
opacity: 0.25;
color: white;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
border-bottom: solid;
border-width: 0.1rem;
}
.projects-table .search img {
width: 1.25rem;
height: 1.25rem;
margin-right: 0.25rem;
}
.projects-table .projects-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
margin-top: 1rem;
flex-grow: 1;
border-style: solid;
}
.projects-table .projects-content .sidebar {
width: 10%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
border-style: solid;
margin: 0.5rem;
}
.projects-table .projects-content .sidebar p {
border-style: solid;
border-width: 0.1rem;
border-radius: 0.5rem;
margin-top: 0;
margin-bottom: 0.5rem;
padding: 1rem;
}
.projects-table .projects-content .content {
width: 100%;
height: 100%;
margin: 0.5rem 1rem 0.5rem 1rem;
border-style: solid;
border-width: 0.1rem;
border-radius: 0.5rem;
padding: 1rem;
}
<div class="projects-table">
<div class="search">
<h3>Search...</h3>
</div>
<div class="projects-content">
<div class="sidebar">
<p>Sidebar</p>
<p>Sidebar</p>
</div>
<p class="content">content</p>
</div>
</div>
3条答案
按热度按时间xn1cxnb41#
您可以尝试设置flexbox
align-items:stretch
和flex-grow:1
属性:42fyovps2#
您所需要做的就是为内容项指定一个
flex-grow: 1
watbbzwu3#
这里有一个替代方法来做你正在做的事情。我发现使用这样的东西可以使长期维护更容易,并且单个“块”样式更容易理解,而无需复杂的定位。
我发现使用网格IN可以使复杂的布局更容易。注意这里我使用了一些网格区域的名字,只是为了让事情变得清楚;一些丑陋的造型只是为了显示什么是在哪里等。