Question

我是CSS新手，需要一些帮助。虽然解决起来似乎很简单，但我已经在这个问题上工作了大约4个小时。我在互联网上发现了许多类似的问题，但每个案例都与我的不同，以及＆＃34;解决方案＆＃34;无法解决我的问题（已经尝试了大部分问题）。

以下是我的html页面的基本结构：

html {
    height: 100%;
}

body {
    margin:0;
    padding:0;
    width:100%;
    height: 100%;
    min-height: 100%;
    background: #DEDEDE;
}

#main {
    width: 100%;
    min-height:100%;
    position:relative;
}

#head {
    width: 100%;
    height: 58px;
    border-bottom: 1px solid #115293;
    background-color: #1976D2;
}

#head #head_content {
    width: 1000px;
    padding: 6px;
    color: #FFFFFF;
    margin: 0 auto;
    text-align: center;
}

#body {
    width: 1000px;
//    height: 100%;
//    min-height: 100%;
    margin: 0 auto;
//    padding-bottom: 50px;
    border-left: 1px solid #BFBFBF;
    border-right: 1px solid #BFBFBF;
}

#body #menu {
    float: left;
    width: 220px;
//    height: 100%;
//    min-height: 100%;
    background-color: #94C9FF;
}

#body #page {
    overflow: hidden;
//    height: 100%;
//    min-height: 100%;
    padding: 10px;
    color: #5C5C5C;
    border-left: 1px solid #BFBFBF;
    background-color: #FFFFFF;
}

#foot {
    position:absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 58px;
    color: #FFFFFF;
    border-top: 1px solid #115293;
    background-color: #1976D2;
}

#foot #foot_content {
    position: relative;
    width: 1000px;
    padding: 6px;
    margin: 0 auto;
    text-align: center;
}

这是我想要实现的CSS：

rectangle

Obs：注释行是我已经尝试过的一些解决方案。

这是我到目前为止所得到的：

最后这就是我真正需要的东西：

Answer 1

您将#body div设置为剩余空间的完整高度的原因是因为每个包装元素都需要height:100%而不仅仅是其中之一。这意味着#main，#body，#page和#menu。

html {
    height: 100%;
}

body {
    margin:0;
    padding:0;
    width:100%;
    height: 100%;
    min-height: 100%;
    background: #DEDEDE;
}

#main {
    width: 100%;
    min-height:100%;
    position:relative;
  height:100%;
}

#head {
    width: 100%;
    height: 58px;
    border-bottom: 1px solid #115293;
    background-color: #1976D2;
}

#head #head_content {
    width: 1000px;
    padding: 6px;
    color: #FFFFFF;
    margin: 0 auto;
    text-align: center;
}

#body {
  height:100%;
    width: 1000px;
    margin: 0 auto;
    border-left: 1px solid #BFBFBF;
    border-right: 1px solid #BFBFBF;
}

#body #menu {
    float: left;
    width: 220px;
    background-color: #94C9FF;
  height:100%;
}

#body #page {
    overflow: hidden;
    padding: 10px;
    color: #5C5C5C;
    border-left: 1px solid #BFBFBF;
    background-color: #FFFFFF;
  height:100%;
}

#foot {
    position:absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 58px;
    color: #FFFFFF;
    border-top: 1px solid #115293;
    background-color: #1976D2;
}

#foot #foot_content {
    position: relative;
    width: 1000px;
    padding: 6px;
    margin: 0 auto;
    text-align: center;
}

<html >
<head>
    <title>Test</title>
</head>
<body>

    <div id="main">

        <div id="head">
            <div id="head_content">
                HEARDER
            </div>
        </div>

        <div id="body">

            <div id="menu">
                MENU
            </div>

            <div id="page">
                PAGE CONTENT
            </div>

        </div>

        <div id="foot">
            <div id="foot_content">
                FOOTER
            </div>
        </div>

    </div>

</body>
</html>

Answer 2

您可以通过以下方式执行此操作 -

只需将高度单位用作相对于视口的j。添加css的其余部分以获得所需的宽度效果。

结帐摘要

＆＃13;

$max        =   100;
 $oray       =   1;
 $max_mal = (3 - $oray);


$total = 0;
    for ($i = 0; $i < $max_mal; $i++){
      $goli = mt_rand(3, 8);
      $total += $goli;
        $golis[] = $goli;
    } 

    foreach($golis as &$goli) {
        $goli = floor(($goli / $total) * $max);
          if ($goli == 0) {
            $goli = 1;
          }
     }
    $result =   array_pad($golis, 3, -1);
    shuffle($result);
    $myresult = $result[0];    
    $negative_var=false;

    if($myresult < 0)
    {
      $negative_var=true;

      $myresult = 0-$myresult;
    }

    $myresultb = str_pad($myresult, 5, '0', STR_PAD_LEFT);
    $myresultf =  '0.'.$myresultb.'<br/>';

    if($negative_var)
      $myresultf="-".$myresultf;

    $total_score = 300;
    echo  $myresultf;

＆＃13;

vh(viewport height)

＆＃13;

你可以在这里找到兼容性---

vh compatibility

修改

作为vh单位的后备，我认为你可以使用javascript。通过javascript你可以得到窗口大小。然后指定页脚的高度作为窗口高度的百分比。

This question can be good starting point

Answer 3

您可以根据内容大小来添加以下内容，只需根据您想要的内容更改像素： -

div#page {
    width: 100%;
    height: 600px;
}

我希望它会有所帮助

CSS - 使页面内容填满所有屏幕高度

3 个答案: