我想知道如何编程fix-height-div和flexible-height-div

Question

我有一个CSS编程网站。在编程过程中，我发现了一个问题。 如果更改了display-size，则div下的值会上升。因此，我想解决此问题，在更改显示大小时添加sub-div。在我所附的图片中，我只想显示div 1，而当用户滚动时，在div下显示其他。当显示大小更改时，我添加了sub-div（= div2在图片中）。 （div 1背景色和div 2背景色是相同的。由于颜色相同，似乎只有div1。）我应该如何编程？

Answer 1

我无法理解您提出的问题，但是按照附件中提供的方案进行操作

.div1 {
height: 200px //fixed height for div1
}

.div2 {
display: none;
height: auto;
}

并使用jquery，您可以定位到滚动事件以显示div2

$(document).on('scroll', function(){
if($(window).pageYOffset > 0) {
$('.div2).show();
}
else {
$('.div2).hide();
})

以及用于移动写媒体查询

@media only screen and (max-width:768px) {
//write your css code for div1 and div2 here.
}

Answer 2

我不清楚您要实现的目标，但是如果您的目标是合并一个固定大小的元素，并将其余空间分配给另一个灵活的元素，则flexbox可能会有所帮助：

<div class="parent">
    <div class="fixedSizeDiv"></div>
    <div class="flexibleDiv"></div>
</div>

具有以下样式：

.parent {
   /* maybe height property need to be set, depending on your wrapper element layout properties... */
   display:flex;
   flex-direction:column;
}

.fixedSizeDiv {
    flex-basis: 200px; /*or whatever*/
}

.flexibleDiv { flex:1; }