水平填充容器内部空间

huangapple
go评论92阅读模式
英文:

Filling space horizontally inside container

问题

我有一个容器，里面包含两个元素：一个搜索栏和下面的一个表格。在表格内部，我有一个位于左侧的侧边栏和右侧的一些内容。容器的高度是固定的，我希望侧边栏和内容在垂直方向上填充空间。

我可以让表格填充空间，但无法让侧边栏和内容填充。以下是我能够实现的最接近的效果：

  1. <div class="projects-table">
  2.     <div class="search">
  3.         <h3>搜索...</h3>
  4.     </div>
  5.     <div class="projects-content">
  6.         <div class="sidebar">
  7.             <p>侧边栏</p>
  8.             <p>侧边栏</p>
  9.         </div>
  10.         <p class="content">内容</p>
  11.     </div>
  12. </div>
  1. * {
  2.     font-family: "Poppins", sans-serif;
  3. }
  5. body {
  6.     background-size: 100%;
  7.     background-color: black;
  8.     background-repeat: "no-repeat";
  9.     background-position: 0 0;
  10.     color: aliceblue;
  11.     margin: 0;
  12.     padding: 0;
  13. }
  15. .projects-table {
  16.     border-style: solid;
  17.     border-radius: 1rem;
  18.     border-width: 0.25rem;
  19.     border-color: slategrey;
  20.     margin-top: 5rem;
  21.     padding: 1rem;
  22.     height: 20rem;
  23.     display: flex;
  24.     flex-direction: column;
  25. }
  27. .projects-table .search {
  28.     opacity: 0.25;
  29.     color: white;
  30.     display: flex;
  31.     flex-direction: row;
  32.     justify-content: start;
  33.     align-items: center;
  34.     border-bottom: solid;
  35.     border-width: 0.1rem;
  36. }
  38. .projects-table .search img {
  39.     width: 1.25rem;
  40.     height: 1.25rem;
  41.     margin-right: 0.25rem;
  42. }
  44. .projects-table .projects-content {
  45.     display: flex;
  46.     flex-direction: row;
  47.     justify-content: space-between;
  48.     align-items: flex-start;
  49.     margin-top: 1rem;
  50.     flex-grow: 1;
  51.     border-style: solid;
  52. }
  54. .projects-table .projects-content .sidebar {
  55.     width: 10%;
  56.     height: 100%;
  57.     display: flex;
  58.     flex-direction: column;
  59.     align-items: center;
  60.     border-style: solid;
  61.     margin: 0.5rem;
  62. }
  64. .projects-table .projects-content .sidebar p {
  65.     border-style: solid;
  66.     border-width: 0.1rem;
  67.     border-radius: 0.5rem;
  68.     margin-top: 0;
  69.     margin-bottom: 0.5rem;
  70.     padding: 1rem;
  71. }
  73. .projects-table .projects-content .content {
  74.     width: 100%;
  75.     height: 100%;
  76.     margin: 0.5rem 1rem 0.5rem 1rem;
  77.     border-style: solid;
  78.     border-width: 0.1rem;
  79.     border-radius: 0.5rem;
  80.     padding: 1rem;
  81. }
英文:

I have a container that contains two elements: a search bar, and a table under it. Inside the table, I have a sidebar to the left and some content to the right. The container has fixed height, and I want the sidebar and content to fill the space vertically.

I can get the table to fill the space, but not the sidebar and the content. This is the closest I can get:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2. font-family: &quot;Poppins&quot;, sans-serif;
  3. }
  4. body {
  5. background-size: 100%;
  6. /*background-image: url(&#39;./images/diego-ph-5LOhydOtTKU-unsplash.jpg&#39;);*/
  7. background-color: black;
  8. background-repeat: &quot;no-repeat&quot;;
  9. background-position: 0 0;
  10. color: aliceblue;
  11. margin: 0;
  12. padding: 0;
  13. }
  14. .projects-table {
  15. border-style: solid;
  16. border-radius: 1rem;
  17. border-width: 0.25rem;
  18. border-color: slategrey;
  19. margin-top: 5rem;
  20. padding: 1rem;
  21. height: 20rem;
  22. display: flex;
  23. flex-direction: column;
  24. }
  25. .projects-table .search {
  26. opacity: 0.25;
  27. color: white;
  28. display: flex;
  29. flex-direction: row;
  30. justify-content: start;
  31. align-items: center;
  32. border-bottom: solid;
  33. border-width: 0.1rem;
  34. }
  35. .projects-table .search img {
  36. width: 1.25rem;
  37. height: 1.25rem;
  38. margin-right: 0.25rem;
  39. }
  40. .projects-table .projects-content {
  41. display: flex;
  42. flex-direction: row;
  43. justify-content: space-between;
  44. align-items: flex-start;
  45. margin-top: 1rem;
  46. flex-grow: 1;
  47. border-style: solid;
  48. }
  49. .projects-table .projects-content .sidebar {
  50. width: 10%;
  51. height: 100%;
  52. display: flex;
  53. flex-direction: column;
  54. align-items: center;
  55. border-style: solid;
  56. margin: 0.5rem;
  57. }
  58. .projects-table .projects-content .sidebar p {
  59. border-style: solid;
  60. border-width: 0.1rem;
  61. border-radius: 0.5rem;
  62. margin-top: 0;
  63. margin-bottom: 0.5rem;
  64. padding: 1rem;
  65. }
  66. .projects-table .projects-content .content {
  67. width: 100%;
  68. height: 100%;
  69. margin: 0.5rem 1rem 0.5rem 1rem;
  70. border-style: solid;
  71. border-width: 0.1rem;
  72. border-radius: 0.5rem;
  73. padding: 1rem;
  74. }

<!-- language: lang-html -->

  1.  &lt;div class=&quot;projects-table&quot;&gt;
  2. &lt;div class=&quot;search&quot;&gt;
  3. &lt;h3&gt;Search...&lt;/h3&gt;
  4. &lt;/div&gt;
  5. &lt;div class=&quot;projects-content&quot;&gt;
  6. &lt;div class=&quot;sidebar&quot;&gt;
  7. &lt;p&gt;Sidebar&lt;/p&gt;
  8. &lt;p&gt;Sidebar&lt;/p&gt;
  9. &lt;/div&gt;
  10. &lt;p class=&quot;content&quot;&gt;content&lt;/p&gt;
  11. &lt;/div&gt;
  12. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

你可以尝试设置 flexbox 的 align-items: stretch 和 flex-grow: 1 属性：

  1. .projects-table .projects-content {
  2.   align-items: stretch;
  3. }
  4. .projects-table .projects-content .content {
  5.   flex-grow: 1;
  6. }
英文:

You can try to set flexbox align-items:stretch and flex-grow:1 properties:

  1. .projects-table .projects-content {
  2. align-items: stretch;
  3. }
  4. .projects-table .projects-content .content {
  5. flex-grow: 1;
  6. }

答案2

得分: 0

以下是翻译好的部分：

"All you need to do is to give the content items a flex-grow: 1" 翻译为 "你只需要给内容项添加 flex-grow: 1"。

剩下的是代码部分，不需要翻译。

英文:

All you need to do is to give the content items a flex-grow: 1

  1. .projects-table .projects-content .sidebar p {
  2. flex-grow: 1;
  3. ...
  4. }

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2. font-family: &quot;Poppins&quot;, sans-serif;
  3. }
  4. body {
  5. background-size: 100%;
  6. /*background-image: url(&#39;./images/diego-ph-5LOhydOtTKU-unsplash.jpg&#39;);*/
  7. background-color: black;
  8. background-repeat: &quot;no-repeat&quot;;
  9. background-position: 0 0;
  10. color: aliceblue;
  11. margin: 0;
  12. padding: 0;
  13. }
  14. .projects-table {
  15. border-style: solid;
  16. border-radius: 1rem;
  17. border-width: 0.25rem;
  18. border-color: slategrey;
  19. margin-top: 5rem;
  20. padding: 1rem;
  21. height: 20rem;
  22. display: flex;
  23. flex-direction: column;
  24. }
  25. .projects-table .search {
  26. opacity: 0.25;
  27. color: white;
  28. display: flex;
  29. flex-direction: row;
  30. justify-content: start;
  31. align-items: center;
  32. border-bottom: solid;
  33. border-width: 0.1rem;
  34. }
  35. .projects-table .search img {
  36. width: 1.25rem;
  37. height: 1.25rem;
  38. margin-right: 0.25rem;
  39. }
  40. .projects-table .projects-content {
  41. display: flex;
  42. flex-direction: row;
  43. justify-content: space-between;
  44. align-items: flex-start;
  45. margin-top: 1rem;
  46. flex-grow: 1;
  47. border-style: solid;
  48. }
  49. .projects-table .projects-content .sidebar {
  50. width: 10%;
  51. height: 100%;
  52. display: flex;
  53. flex-direction: column;
  54. align-items: center;
  55. border-style: solid;
  56. margin: 0.5rem;
  57. }
  58. .projects-table .projects-content .sidebar p {
  59. flex-grow: 1;
  60. border-style: solid;
  61. border-width: 0.1rem;
  62. border-radius: 0.5rem;
  63. margin-top: 0;
  64. margin-bottom: 0.5rem;
  65. padding: 1rem;
  66. }
  67. .projects-table .projects-content .content {
  68. width: 100%;
  69. height: 100%;
  70. margin: 0.5rem 1rem 0.5rem 1rem;
  71. border-style: solid;
  72. border-width: 0.1rem;
  73. border-radius: 0.5rem;
  74. padding: 1rem;
  75. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;projects-table&quot;&gt;
  2. &lt;div class=&quot;search&quot;&gt;
  3. &lt;h3&gt;Search...&lt;/h3&gt;
  4. &lt;/div&gt;
  5. &lt;div class=&quot;projects-content&quot;&gt;
  6. &lt;div class=&quot;sidebar&quot;&gt;
  7. &lt;p&gt;Sidebar&lt;/p&gt;
  8. &lt;p&gt;Sidebar&lt;/p&gt;
  9. &lt;/div&gt;
  10. &lt;p class=&quot;content&quot;&gt;content&lt;/p&gt;
  11. &lt;/div&gt;
  12. &lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

这里是一种替代方法，用于执行你正在做的事情。我发现使用这样的方式可以使长期维护更容易，并且可以更容易理解复杂的定位而不需要复杂的样式设置。

我发现在一个网格中使用嵌套网格可以使复杂布局更容易。请注意，我在这里使用了一些网格区域的名称，只是为了清晰地表示每个区域的位置；还使用了一些丑陋的样式，以显示各个元素的位置等。

  • 使用一个网格作为“页面”，以解决先前的大5em边距可能用于某些内容的情况，这样可以避免一些奇怪的固定位置和大小调整的挑战。
  • 添加一些
    包装器作为“容器”。
  • 使用“container”来帮助描述每个容器块的布局与视觉样式。
  1. <div class="page-container">
  2.   <div class="projects-table project-container">
  3.     <div class="search search-container">
  4.       <div class="image-container">
  5.         <img src="" alt="IMG">
  6.       </div>
  7.       <div class="search-search">
  8.         <h3>搜索...</h3>
  9.       </div>
  10.     </div>
  11.     <div class="projects-content content-container">
  12.       <div class="sidebar">
  13.         <p>侧边栏</p>
  14.         <p>侧边栏</p>
  15.       </div>
  16.       <p class="content">内容</p>
  17.     </div>
  18.   </div>
  19. </div>
  1. * {
  2.   font-family: "Poppins", sans-serif;
  3. }
  5. body {
  6.   background-color: #000000;
  7.   color: aliceblue;
  8.   margin: 0;
  9.   padding: 0;
  10.   font-size: 16px;
  11.   box-sizing: border-box;
  12. }
  14. .page-container {
  15.   background-color: #404040;
  16.   display: grid;
  17.   grid-template-columns: 1fr;
  18.   /* 先前的5em边距，但如果需要内容，允许内容在该行中 */
  19.   grid-template-rows: 5em auto;
  20.   grid-template-areas:
  21.     "nothingyet"
  22.     "projectthings";
  23. }
  25. .project-container {
  26.   grid-area: projectthings;
  27.   background-color: #004020;
  28.   /* 告诉此容器成为自动行 */
  29.   display: grid;
  30.   grid-template-columns: 1fr;
  31.   grid-template-rows: 5em auto;
  32.   grid-template-areas:
  33.     "searchc"
  34.     "contentc";
  35.   height: 20rem;
  36. }
  38. /* 其余的CSS样式请参考你的原始代码 */

注意：这只是你代码的一部分，其中包含HTML和CSS。如果需要完整的翻译或其他信息，请继续提问。

英文:

Here is a bit of an alternate way to do what you are doing. I find using something like this makes long-term maintenance easier and individual "block" styling easier to understand without complex positioning.

I find that using a grid with grids IN it makes complex layout easier. Note here I used some grid-areas names just to make things clear what was where; some ugly styling just to show what is where etc.

  • using a grid for the "page" to account for that prior large 5em margin that MGIHT be for some content? avoids some weird fix positioning and sizing challenges if so
  • adding some div wrappers for "containers"
  • used "container" to help describe layout vs visual styles for each container block

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2. font-family: &quot;Poppins&quot;, sans-serif;
  3. }
  4. body {
  5. background-color: #000000;
  6. color: aliceblue;
  7. margin: 0;
  8. padding: 0;
  9. font-size: 16px;
  10. box-sizing: border-box;
  11. }
  12. .page-container {
  13. background-color: #404040;
  14. display: grid;
  15. grid-template-columns: 1fr;
  16. /* the 5em nothingyet is the prior 5em margin but allows content to be in that row if needed */
  17. grid-template-rows: 5em auto;
  18. grid-template-areas: 
  19. &quot;nothingyet&quot; 
  20. &quot;projectthings&quot;;
  21. }
  22. .project-container {
  23. grid-area: projectthings;
  24. background-color: #004020;
  25. /* tell the this container to be that auto row */
  26. display: grid;
  27. grid-template-columns: 1fr;
  28. grid-template-rows: 5em auto;
  29. grid-template-areas: 
  30. &quot;searchc&quot;
  31. &quot;contentc&quot;;
  32. height: 20rem;
  33. }
  34. .search-container {
  35. grid-area: searchc;
  36. display: grid;
  37. grid-template-rows: afr;
  38. grid-template-columns: 1.25em auto;
  39. /* this 0.25em was padding before but really is a &quot;gap&quot; between image and h1 */
  40. grid-gap: 0.25em;
  41. grid-template-areas: &quot;imgc searchy&quot;;
  42. align-items: center;
  43. border-bottom: solid;
  44. border-width: 0.1rem;
  45. border-color: #7FFF00;
  46. opacity: 0.25;
  47. color: white;
  48. }
  49. .content-contaIner {
  50. grid-area: contentc;
  51. background-color: #FF0080;
  52. display: grid;
  53. grid-template-columns: 10% auto;
  54. grid-template-rows: 20em;
  55. grid-template-areas: &quot;sidebar content&quot;;
  56. }
  57. .sidebar {
  58. grid-area: sidebar;
  59. }
  60. .content {
  61. grid-area: content;
  62. }
  63. .image-container {
  64. grid-area: imgc;
  65. height: 1.25em;
  66. }
  67. .search-search {
  68. grid-area: searchy;
  69. }
  70. /* below here is just the styling from before mostly - see inline comments */
  71. .projects-table {
  72. border-style: solid;
  73. border-radius: 1rem;
  74. border-width: 0.25rem;
  75. border-color: slategrey;
  76. }
  77. /* moved to the search-container grid definition
  78. .projects-table .search img {
  79. width: 1.25rem;
  80. height: 1.25rem;
  81. margin-right: 0.25rem;
  82. }
  83. */
  84. .projects-table .search .image-container img {
  85. /* depends on image and use intent really */
  86. height: 100%;
  87. width: 100%;
  88. border: solid yellow 3px;
  89. }
  90. .projects-table .projects-content {
  91. display: flex;
  92. flex-direction: row;
  93. justify-content: space-between;
  94. align-items: flex-start;
  95. margin-top: 1rem;
  96. flex-grow: 1;
  97. border-style: solid;
  98. }
  99. .projects-table .projects-content .sidebar {
  100. /* moved to content-container css
  101. width: 10%;
  102. height: 100%;
  103. */
  104. display: flex;
  105. flex-direction: column;
  106. align-items: center;
  107. border-style: solid;
  108. margin: 0.5rem;
  109. }
  110. .projects-table .projects-content .sidebar p {
  111. border-style: solid;
  112. border-width: 0.1rem;
  113. border-radius: 0.5rem;
  114. margin-top: 0;
  115. margin-bottom: 0.5rem;
  116. padding: 1rem;
  117. }
  118. .projects-table .projects-content .content {
  119. /* moved to content-container css as auto
  120. width: 100%;
  121. height: 100%;
  122. */
  123. margin: 0.5rem 1rem 0.5rem 1rem;
  124. border-style: solid;
  125. border-width: 0.1rem;
  126. border-radius: 0.5rem;
  127. padding: 1rem;
  128. }
  129. /* can be whatever but just to show it is contained in the container block allocated to it */
  130. .content{width:100%;}

<!-- language: lang-html -->

  1. &lt;div class=&quot;page-container&quot;&gt;
  2. &lt;div class=&quot;projects-table project-container&quot;&gt;
  3. &lt;div class=&quot;search search-container&quot;&gt;
  4. &lt;div class=&quot;image-container&quot;&gt;
  5. &lt;!-- might not seem to line up but the alt text IMG is bigger than the 1.25em --&gt;
  6. &lt;img src=&quot;&quot; alt=&quot;IMG&quot;&gt;
  7. &lt;/div&gt;
  8. &lt;div class=&quot;search-search&quot;&gt;
  9. &lt;h3&gt;Search...&lt;/h3&gt;
  10. &lt;/div&gt;
  11. &lt;/div&gt;
  12. &lt;div class=&quot;projects-content content-container&quot;&gt;
  13. &lt;div class=&quot;sidebar&quot;&gt;
  14. &lt;p&gt;Sidebar&lt;/p&gt;
  15. &lt;p&gt;Sidebar&lt;/p&gt;
  16. &lt;/div&gt;
  17. &lt;p class=&quot;content&quot;&gt;content&lt;/p&gt;
  18. &lt;/div&gt;
  19. &lt;/div&gt;
  20. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月29日 18:28:06
  • 转载请务必保留本文链接：https://go.coder-hub.com/76580185.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定