Question

我试图将我的网站背景分成两个colar verticalle。全屏高度和宽度。我在这做错了什么？希望有人能提供帮助。问候

我有一个指向测试页here

的链接

HTML：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing fullscreen</title>
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">
<table id="maintable" border="0" cellspacing="0" cellpadding="0">
<tr>

<td id="table1">How to get this fullscreen height?</td>

<td id="table2">
<div id="logomelonmania">
</div>

<table id="menu-div" >
<tr>

</tr> 
</table>

<div id="paragraphtext"></div>
</td>
</tr>
</table>
</div>
</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */

body {
margin:0px;
}


tablepage {
border-spacing: 0;
border-collapse: collapse;
}

#table1 {
background-color: #88b56d;
width:50%;
height:100%;
}

#table2 {
background-color: #435;
height:100%;
width:50%;
}

#wrapper {
height:100%;
}

#maintable {
height:100%;
width:100%;
}

Answer 1

如果查看测试页上实际存在的css，＃wrapper设置为100px而不是100％我已经创建了一个可以像你描述的那样工作的plunker .. http://plnkr.co/edit/wwyK3sl41wUDajiSAgnC?p=preview

您可能还必须将html标记设置为100vh 我在这里找到了100 vh ...... Make body have 100% of the browser height

#wrapper {
margin: 0px 0px 0px 0px;
height:100px;
overflow:hidden;

}

Answer 2

我相信这已经得到了回答，无论如何，这是一个相当简单的结构：

包装器div＆gt;左+右divs

要实现此功能，我们必须将HTML和body标记设置为height:100%和width:100%，并将相同的内容添加到包装标记中。然后右和左将获得50％的宽度和100％的高度

＆＃13;

html, body, #wrap {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    color:#FFF;
}

#wrap {
    overflow:auto;
}

#left, #right {
    height: 100%;
    width: 50%;
    float:left;
}

#left {background: green;}

#right {background:purple}

#footer {
    background:black;
    height:50px;
}

＆＃13;

<div id="wrap">
    <div id="left">Left Side</div>
    <div id="right">Right Side</div>
</div>

<div id="footer">footer</div>

＆＃13;

Answer 3

高度不适用于带有像素的％ <img height="pixels"> You can use with porcent in that case <div style="height:200px"> <p style="height:100%; display:block;">Hello, world!</p> </div> 因为在我们使用像素之前，100％显示200px

试试这个 div { height:100vh; } 视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

你也可以使用它，但我完全不信任 body, html { height: 100%; }

#right { height: 100%; }

全屏高度和宽度

3 个答案: