Question

我正在尝试创建一个将在手机上填充屏幕的网页。

但是我还没有找到一种干净的方式（没有固定大小的东西），尤其是涉及到可滚动区域时

我有一个固定大小的body（在示例中，设置为200px进行测试，尽管通常为100％ ），并且带有<div id="page">在里面。我想成为一个可用的 scrollable <div class="MessageScroll">谁是 height 。这在<div id="main">中。现在有了#page，有一个#top，#main和#footer-div。

<div id="page">的垂直大小设置为主体的大小。 <div id="top">和<div id="footer">最终将成为其内容所需的大小。现在我需要#main才能成为#page.height - #top.height - #footer.height。

我该怎么做？

我研究了包括flex系统在内的各种方法，但这似乎并没有完成。可能重复的问题不能解决问题（请参阅评论）。

请考虑以下简化代码。对于#main，它具有固定的大小以使其正常工作（ ish ）。

html {
  height:		100%;
  margin:		0px;
}

body {
  height:		200px;
  margin:		0px;
  font: 		100% Verdana, Helvetica, Arial, sans-serif;
  background:	#999999;
      color: 		Black;
}

#page {
  height:		100%;
  margin:		0px;
}

#top {
  background-color:	#CCDDDD;
}

#main {
  /* height:	100%; */
  height:		calc(100% - 40px);
  background:	white;
}

#footer {
  font: 		80% Verdana, Helvetica, Arial, sans-serif;
  font-weight:	bold;
  background: 	#7AB5E5;
  border-top: 	1px solid #436976;
  border-bottom: 	1px solid #436976;
  clear: 		both;
  float: 		none;
  padding: 	0.1em 0.1em 0.1em 0.1em;
  text-align: 	left;
}

div.MessageScroll {
  height:		100%;
  margin:		0px;
  overflow-y:	auto;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id='page'>
      <div id="top">
        Header
      </div>
      <div id="main">
        <div class=MessageScroll>
          <div class=Message>
            Some Text.1</br>
            Some Test 2</br>
            Some Test 3</br>
            Some Test 4</br>
          </div>
          <div class=Message>
            Some Text.1</br>
            Some Test 2</br>
            Some Test 3</br>
            Some Test 4</br>
          </div>
          <div class=Message>
            Some Text.1</br>
            Some Test 2</br>
            Some Test 3</br>
            Some Test 4</br>
          </div>
          <div class=Message>
            Some Text.1</br>
            Some Test 2</br>
            Some Test 3</br>
            Some Test 4</br>
          </div>
          <div class=Message>
            Some Text.1</br>
            Some Test 2</br>
            Some Test 3</br>
            Some Test 4</br>
          </div>
          <div class=Message>
            Some Text.1</br>
            Some Test 2</br>
            Some Test 3</br>
            Some Test 4</br>
          </div>
          <div class=Message>
            Some Text.1</br>
            Some Test 2</br>
            Some Test 3</br>
            Some Test 4</br>
          </div>
          <div class=Message>
            Some Text.1</br>
            Some Test 2</br>
            Some Test 3</br>
            Some Test 4</br>
          </div>
        </div>
      </div>
      <div id="footer">
        Footer
      </div>
    </div>
  </body>
</html>

如何调整div的大小以填充父级中的可用高度

0 个答案: