使用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高度

回答

相關問題