如何在调整宽度时固定 DIV 高度？ Mobile/Table/PC 兼容浏览器

Question

我对 % 宽度和高度有疑问：我想以百分比形式给出每个尺寸（手机、平板电脑、个人电脑浏览器等兼容性），但是当我调整浏览器宽度时，会导致所有元素的高度也被调整。如何在高度未更改时停止高度修改？我只希望高度适合元素的内容，仅此而已。

我的网站结构：

*{
 padding: 0;
 margin: 0;
        font-family: Verdana, Arial, Helvetica, Sans-serif;
        text-align: center;
}

html, body{
 min-height: 100%;
 min-width: 100%;
}

#wrapper{
 display: inline-block;
 margin: 0% auto 0%;
 min-height: 100%;
 height: 100%;
 width: auto;
 overflow: auto;
}

.headline, .menu, .content{
 display: inline-block;
        height: auto;
 width: 58%;
 font-size: 90%;
 margin: 1% auto 0%;
 padding: 1%;
 text-align: left;
}

.innerDiv{
 width: 98%;
 padding: 1%;
 margin: 0% auto 1%;
        text-align: left;
}

<HTML>
<BODY>
<DIV id='wrapper'>
  <DIV class='headline'>
    Headline content and divs.
  </DIV>
  <DIV class='menu'>
    Menu elements: divs, inputs.
  </DIV>
  <DIV class='content'>
    <DIV class='innerDiv'>
      A line for one question and one answer (div+input).
    </DIV>
    <DIV class='innerDiv'>
      One more line for another question and answer.
    </DIV>
  </DIV>
</DIV>
</BODY>
</HTML>

Answer 1

您可以使用基于视口宽度和高度的 vw 和 vh 单位。 CSS units Fiddle

Answer 2

任何百分位数值都是相对于视口大小的。视口高度 (VH) 和视口宽度 (VW) 也是相对的。如果您想确保您的元素始终具有相同的大小，请使用 EM 值。

如何在调整宽度时固定 DIV 高度？ Mobile/Table/PC 兼容浏览器

How to fix DIV height when resizing width? Mobile/Table/PC browser compatible

css

resize

height

width

percentage