使主页成为屏幕高度的 100%答案

【问题标题】：Make home page 100% of the height of screen使主页成为屏幕高度的 100%
【发布时间】：2014-01-16 16:23:46
【问题描述】：

我有一个主页/登陆页面，它的底部有一个图像（画布）和一个轮播。

我希望整个页面为屏幕大小的 100%，并具有以下分布：

navbar:10% height
canvas/image:60% height
carousel:30% height

在没有滚动条的情况下，我们如何确保整个页面占屏幕高度 100% 的分布？

目前我为画布设置了 400 像素的固定高度，这会弄乱不同屏幕上的结构

我还想确保支持不同尺寸的屏幕（台式机、笔记本电脑、显示器等）。如果不支持移动屏幕，那很好，但最好有。

【问题讨论】：

标签： css html responsive-design sass

【解决方案1】：

很简单，根据你的需要修改下面的代码。

<html>
<head>
    <style>
    html,body {
        margin: 0;
        padding: 0;
    }
    #nav {
        position: absolute;
        top: 0;
        height: 10%;
        width: 100%;
        background: red;
    }
    #can {
        position: absolute;
        bottom: 30%;
        height: 60%;
        width: 100%;
        background: blue;
    }
    #car {
        position: absolute;
        bottom: 0;
        height: 30%;
        width: 100%;
        background: green;
    }
    </style>
</head>
<body>
    <div id="nav">
        Test Nav Div
    </div>

    <div id="can">
        Test Canvas Div
    </div>  

    <div id="car">
        Test Carousel Div
    </div>
</body>
</html>

【讨论】：