缩小浏览器时缩小div高度

时间:2013-10-03 11:49:50

标签: html css browser scaling

我将div设置为height: 400px;width 100%;

我希望它在缩小浏览器时变得更小。 max-height: 400px将是一个答案,但然后div变为0px高......如果你理解我的意思。 div不再是400px高,max-height:400px;

div的内容是文本。这个文本仍然可见,但我需要整个div为400px高度(对于背景颜色和div下面的div)。

我想要的是:我想要一个具有最小高度的div,但是当浏览器按比例缩小时会缩小...

2 个答案:

答案 0 :(得分:1)

  

示例代码:http://cdpn.io/cjyaq


height:100%max-height: 400px设置为div元素

同时为height: 100%html元素

设置body

相关CSS

html, body { padding: 0; margin: 0; height: 100%; }

div { 

  border: 3px red solid;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  height: 100%; max-height: 400px; 
}

注意:if your browser is modern enough并且它不支持设置body和html元素的高度vh/vw单位:只需应用

height: 100vh; max-height: 400px;
你的div元素

答案 1 :(得分:0)

将高度:100%和最大高度:400px分配给DIV。