css 容器内水平填充空间

nwlls2ji  于 2023-07-01  发布在  其他
关注(0)|答案(3)|浏览(147)

我有一个包含两个元素的容器:一个搜索栏,和一个在它下面的表。在表格内部,我在左边有一个侧边栏,在右边有一些内容。容器有固定的高度,我希望侧边栏和内容垂直填充空间。
我可以让表格来填充空间,但不能让侧边栏和内容。这是我能得到的最接近的:

* {
  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>
xn1cxnb4

xn1cxnb41#

您可以尝试设置flexbox align-items:stretchflex-grow:1属性:

.projects-table .projects-content {
  align-items: stretch;
}
.projects-table .projects-content .content {
  flex-grow: 1;
}
42fyovps

42fyovps2#

您所需要做的就是为内容项指定一个flex-grow: 1

.projects-table .projects-content .sidebar p {
  flex-grow: 1;
  ...
}
* {
  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 {
  flex-grow: 1;
  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>
watbbzwu

watbbzwu3#

这里有一个替代方法来做你正在做的事情。我发现使用这样的东西可以使长期维护更容易,并且单个“块”样式更容易理解,而无需复杂的定位。
我发现使用网格IN可以使复杂的布局更容易。注意这里我使用了一些网格区域的名字,只是为了让事情变得清楚;一些丑陋的造型只是为了显示什么是在哪里等。

  • 使用网格的“页面”,以考虑到先前的大5em的利润,MGIHT是一些内容?避免了一些奇怪的修复定位和大小调整难题
  • 为“容器”添加一些div Package 器
  • 使用“容器”来帮助描述每个容器块的布局与视觉样式
* {
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #000000;
  color: aliceblue;
  margin: 0;
  padding: 0;
  font-size: 16px;
  box-sizing: border-box;
}

.page-container {
  background-color: #404040;
  display: grid;
  grid-template-columns: 1fr;
  /* the 5em nothingyet is the prior 5em margin but allows content to be in that row if needed */
  grid-template-rows: 5em auto;
  grid-template-areas: 
  "nothingyet" 
  "projectthings";
}

.project-container {
  grid-area: projectthings;
  background-color: #004020;
  /* tell the this container to be that auto row */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: 
  "searchc"
  "contentc";
  height: 20rem;
}

.search-container {
  grid-area: searchc;
  display: grid;
  grid-template-rows: afr;
  grid-template-columns: 1.25em auto;
  /* this 0.25em was padding before but really is a "gap" between image and h1 */
  grid-gap: 0.25em;
  grid-template-areas: "imgc searchy";
  align-items: center;
  border-bottom: solid;
  border-width: 0.1rem;
  border-color: #7FFF00;
  opacity: 0.25;
  color: white;
}

.content-contaIner {
  grid-area: contentc;
  background-color: #FF0080;
  display: grid;
  grid-template-columns: 10% auto;
  grid-template-rows: 20em;
  grid-template-areas: "sidebar content";
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.image-container {
  grid-area: imgc;
  height: 1.25em;
}

.search-search {
  grid-area: searchy;
}

/* below here is just the styling from before mostly - see inline comments */
.projects-table {
  border-style: solid;
  border-radius: 1rem;
  border-width: 0.25rem;
  border-color: slategrey;
}

/* moved to the search-container grid definition
.projects-table .search img {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.25rem;
}
*/

.projects-table .search .image-container img {
/* depends on image and use intent really */
  height: 100%;
  width: 100%;
  border: solid yellow 3px;
}

.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 {
  /* moved to content-container css
  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 {
  /* moved to content-container css as auto
  width: 100%;
  height: 100%;
  */
  margin: 0.5rem 1rem 0.5rem 1rem;
  border-style: solid;
  border-width: 0.1rem;
  border-radius: 0.5rem;
  padding: 1rem;
}
/* can be whatever but just to show it is contained in the container block allocated to it */
.content{width:100%;}
<div class="page-container">
  <div class="projects-table project-container">
    <div class="search search-container">
      <div class="image-container">
        <!-- might not seem to line up but the alt text IMG is bigger than the 1.25em -->
        <img src="" alt="IMG">
      </div>
      <div class="search-search">
        <h3>Search...</h3>
      </div>
    </div>
    <div class="projects-content content-container">
      <div class="sidebar">
        <p>Sidebar</p>
        <p>Sidebar</p>
      </div>
      <p class="content">content</p>
    </div>
  </div>
</div>

相关问题