全屏高度和宽度答案

【问题标题】：Fullscreen height and width全屏高度和宽度
【发布时间】：2015-10-24 21:34:55
【问题描述】：

我正在尝试将我的网站背景分成两个垂直的项圈。全屏高度和宽度。我在这里做错了什么？希望有人可以提供帮助。问候

我有一个链接到测试页面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%;
}

【问题讨论】：

您使用表格是否有原因？该元素用于显示表格数据，而不是用于布局页面（就像我们 10 年前所做的那样）。
所以你的意思是我应该只使用 div？
如果与 html5 元素（如页眉、页脚、main、article、section 等）一起使用会更加语义化。
我明白了 :) 对编码还是很陌生
我们都在某个时刻。提问是最好的学习方式之一。

标签： html css height width fullscreen

【解决方案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;

}

【讨论】：

【解决方案2】：

相信这个之前已经回答过了，反正是一个比较简单的结构：

包装 div > 左 + 右 div

为此，我们必须将HTML 和body 标记设置为具有height:100% 和width:100%，并且与包装标记相同。那么 Right 和 Left 将获得 50% 的宽度和 100% 的高度

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;
}

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

<div id="footer">footer</div>

【讨论】：

好的。是的，这很简单。找不到，但感谢您的回答；）
不客气！如果这是您正在寻找的内容，请接受它作为答案

【解决方案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%; }

【讨论】：