Question

我想为container_two div设置固定高度，这意味着即使container_two div中只有很少的项目，底部也应该留一些空间。

下面是我的代码，

.wrapper {
    position: absolute;
    bottom: 32px;
    width: 316px;
    height: 225px;
    background: white;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.29);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 1;
}

.container_one {
    height: 101px;
    padding: 16px 6px 16px 22px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.29);
    margin: 0px -6px 0px -6px;  
} 

.description {
    height: 42px;
    width: 289px;
    margin-top: 8px;
    color: black;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 16px;
 ; 

 .container_two { //this to have a fixed height meaning should always be in 104px and when content 
     //overflows should have a scrollbar
     padding: 16px 0px 16px 10px;
     max-height: 104px;
     display: flex;
     flex-wrap: wrap;
     overflow-x: hidden;

     & > div {
         margin-right: 4px;
         margin-bottom: 16px;
     }
 }

 .empty_div{ //i want this to be at the end only occupying 16px height
     height: 16px;
     border-radius: 0 0 16px 16px;
     box-shadow: 0px -6px 6px -6px rgba(0, 0, 0, 0.29);
     margin: 0px -6px 0px -6px;
 }

<div class="wrapper">
    <div class="container_one">
        <span class="text">sometext</span>
        <div class="description">some big description</div>
    </div>
    <div class="container_two"> //want to add fixed height to this
    </div>
    <div class="empty_div"/>
</div>

使用以上代码，一切正常。如果container_two div中的内容溢出并且高度不固定，则会添加滚动条。

现在我还想要的是container_two div应该始终固定为104px的高度。还有如何为包装器，container_one，container_two和empty_div添加不透明度为8％的boxshadow。

有人可以帮我这个忙吗？谢谢。

Answer 1

要使元素位于底部，最先将容器包装到一个div上，比在父容器上justify-content:space-between

最简单

从父级移除高度，因为您将第二个容器限制为104像素；

.wrapper {
    position: absolute;
    bottom: 32px;
    width: 316px;
    // height: 225px;
    background: white;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.29);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    opacity: 1;
      justify-content: space-between;
}

.container_one {
    height: 101px;
    padding: 16px 6px 16px 22px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.29);
    margin: 0px -6px 0px -6px;  
} 

.description {
    height: 42px;
    width: 289px;
    margin-top: 8px;
    color: black;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 16px;
}

/*  //this to have a fixed height meaning should always be in 104px and when content 
     //overflows should have a scrollbar */
    
 .container_two { 
     padding: 16px 0px 16px 10px;
     height: 104px;
     display: flex;
     flex-wrap: wrap;
     overflow: auto;

     & > div {
         margin-right: 4px;
         margin-bottom: 16px;
     }
 }

 .empty_div{
     height: 16px;
     border-radius: 0 0 16px 16px;
     box-shadow: 0px -6px 6px -6px rgba(0, 0, 0, 0.29);
/*      margin: 0px -6px 0px -6px; */
       background-color:red;
       display:block;
 }

<div class="wrapper">
    <div class="container-holder">
        <div class="container_one">
        <span class="text">sometext</span>
        <div class="description">some big description</div>
    </div>
    <div class="container_two"> 
            //want to add fixed height to this Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima aliquid modi asperiores qui ipsum labore sequi dicta, maiores iusto, iste officiis sunt provident repudiandae deserunt eveniet natus magni, dolor recusandae! Error quo nobis dolorem. Rerum illo asperiores quae ex quidem vel est pariatur! Sint consectetur veritatis tempore reiciendis incidunt suscipit repellat! Cupiditate voluptate necessitatibus veritatis non libero porro sit odio ad blanditiis perspiciatis inventore voluptates nemo ea sed aliquid beatae repudiandae sequi nam, veniam reiciendis esse eum amet! Temporibus, dicta! Rem soluta esse harum minima saepe velit eos vero amet vel delectus tempore maiores reprehenderit odit, repudiandae beatae dolores voluptatibus?
    </div>
    </div>
    <div class="empty_div"></div>
</div>

如何使用CSS将div设置为固定高度？

1 个答案: