使用CSS动态调整最小和最大尺寸之间的div高度

我想调整使用CSS的div的高度。我希望内容div的高度至少为420像素，但如果在更大的屏幕上查看内容div并且存在额外的空间，我希望div高度增长但最大为790像素。我真的不知道该怎么做。使用CSS动态调整最小和最大尺寸之间的div高度

#container { 
    position:fixed !important; 
    position:absolute; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    background-color:#F0F; 
} 
#container #menuBar { 
    background-color:#03C; 
    height:100px; 
} 
#container #content { 
    min-height:420px; 
     max-height:790px; 
    background-color:#F00; 
} 
#container #clock { 
    background-color:#0C0; 
    height:100px; 
} 
</style> 
</head> 

<body> 
<div id="container"> 
<div id="menuBar">menubar 
</div> 
<div id="content">content 
</div> 
<div id="clock">clock 
</div> 

</div> 
</body> 
</html>

来源

2016-02-18 user2212774

定位是布局网页的** **非常差的方法。它非常不灵活，并且有更好更快的响应选项。看看[** LearnLayout.com **]（http://learnlayout.com/） –

Flexbox可以做到这一点...但我不确定您的使用案例。在我看来，你可能有溢出问题。

Codepen Demo

但是：

#container { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: #F0F; 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    #container #menuBar { 
 
    background-color: #03C; 
 
    height: 100px; 
 
    } 
 
    #container #content { 
 
    flex: 1 0 120px; 
 
    /* your min-height as flex-basis */ 
 
    max-height: 400px; 
 
    /* your max-height */ 
 
    background-color: #F00; 
 
    } 
 
    #container #clock { 
 
    background-color: #0C0; 
 
    }

<div id="container"> 
 
    <div id="menuBar">menubar 
 
    </div> 
 
    <div id="content">content 
 
    </div> 
 
    <div id="clock">clock 
 
    </div> 
 

 
</div>

来源

2016-02-18 19:24:12

最低高度始终覆盖最大高度，所以你不能同时使用。

这是一种黑客，但你可以用媒体查询来做到这一点。如果这是你的HTML：

<div id="myDiv"></div>

然后添加到您的CSS：

#myDiv{ 
     height:790px;  
    } 
    @media screen and (max-height: 790px) { 
     #myDiv { 
      height:99vh; /*Set this with trial and error because it depends on your margins*/ 
     } 
    } 
    @media screen and (max-height: 420px) { 
     #myDiv { 
      height:420px; 
     } 
    }

来源

2016-02-18 19:29:07

其实身高跳动最小高度，但最大高度跳动高度 - https://jsfiddle.net/ooddf60u/但它是一个有趣的想法。 –

你说得对 - 猜这就是我输入太快时发生的情况。我将编辑我的答案以反映这一点。 –

使用CSS动态调整最小和最大尺寸之间的div高度

回答

相关问题