Html 如何调整div的大小以填充整个浏览器窗口？

请到这里：

使用此帐户登录： 用户：演示 密码：密码

---

现在尝试调整浏览器窗口的大小，并查看div随浏览器窗口调整大小。我想它不能只使用css。我说得对吗？如何创建这样的内容？

它只使用css（如果您希望在移动设备上正确显示，还可以使用“视口”元标记）

如果您希望html页面的行为与此类似，则必须使用%作为宽度（例如，宽度：100%）。在这种情况下，div的宽度将基于（与）大小 视口的一部分

这就是所谓的灵活布局。它是创建响应性网页的一个要素

您可以在此处阅读更多内容：

• 。（这是一本关于不同布局类型的书）
• （作为开始）

---

它只适用于css（如果您希望在移动设备上正确显示，还可以使用“视口”元标记）

如果您希望html页面的行为与此类似，则必须使用%作为宽度（例如，宽度：100%）。在这种情况下，div的宽度将基于（与）大小 视口的一部分

这就是所谓的灵活布局。它是创建响应性网页的一个要素

您可以在此处阅读更多内容：

• 。（这是一本关于不同布局类型的书）
• （作为开始）

---

您是正确的，您提供的示例中的页面没有使用纯css，而是使用javascript在调整窗口大小时呈现css

示例中的一行（html输出中带有内联样式）：

获取新浏览器窗口的宽度和类似的高度

var clientHeight=jQuery(window).height()-48;
var treeHeight=parseInt(clientHeight-5);

以及功能

function resizeGuiWindow(windowName,newWidth,newHeight,window){
   resizePanelTo(windowName,false,newWidth,newHeight);
}

然后应用于树窗口对象

resizeGuiWindow("treeWindow",leftWidth,treeHeight);

这可以在示例页面的源代码中找到。 但是，您可以通过在样式中使用相对单位，在css中完成这一切

阅读更多关于响应性设计、自适应css和流体布局的信息

---

编辑：我几乎在发布答案的同时发布了乔治。尽管他没有直接回答关于您的示例页面的问题，但他所说的都是对的，他在灵活的布局上添加了一些好的资源，您可以找到所有信息来构建一个只有css的类似页面。

您是对的，您提供的示例中的页面没有使用纯css，但是使用javascript在调整窗口大小时呈现css

示例中的一行（html输出中带有内联样式）：

获取新浏览器窗口的宽度和类似的高度

var clientHeight=jQuery(window).height()-48;
var treeHeight=parseInt(clientHeight-5);

以及功能

function resizeGuiWindow(windowName,newWidth,newHeight,window){
   resizePanelTo(windowName,false,newWidth,newHeight);
}

然后应用于树窗口对象

resizeGuiWindow("treeWindow",leftWidth,treeHeight);

这可以在示例页面的源代码中找到。 但是，您可以通过在样式中使用相对单位，在css中完成这一切

阅读更多关于响应性设计、自适应css和流体布局的信息

---

编辑：我几乎在发布答案的同时发布了乔治。尽管他没有直接回答关于您的示例页面的问题，但他所说的一切都是对的，他在灵活的布局上添加了一些好的资源，您可以找到所有信息，仅使用css构建一个类似的页面。

在重新研究fluid layout之后，我终于能够使用css（无javascript）创建整个布局。以下是JSFIDLE中的工作版本：对于以后可能需要它的任何人：

CSS:

HTML:

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。阿利奎姆·阿迪皮斯奥古斯·阿门。这是一种新的饮料。埃涅亚-欧-莱克图。维瓦摩斯和菲利斯·尼布，欧盟大罗特鲁姆。在奥克特品种乌兰柯珀。在diam turpis，ornare id Pellentsque at，blandit et magna。Integer eget dolor tortor，sed vehicula magna。奎斯克·梅特斯·图皮斯、莫利斯·波特·费吉亚特、厄洛斯的调味品。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。请不要这样做，因为你是我的朋友。前庭，前庭，前庭，前庭，前庭。埃尼安·阿库·马萨（Aenean arcu massa），前庭，前庭，前庭，前庭，前庭。这是一个很好的例子。中间悬架，无需更换，无需更换，无需更换。罗特鲁姆酒或是土耳其酒。毛里斯·威尼纳提斯·康瓦利斯元素酒店。
埃蒂亚姆·乌特·马格纳·多洛。这是一个没有封建制度的国家。夸姆利古拉，达皮布斯非库苏斯奎斯，夸姆康莫多。维瓦摩斯·波特托尔，乌尔纳·内克·尤里西斯·斯克利斯，马萨·普勒斯·康格·利古拉，在《大选》中。维韦拉·康莫多·奥古斯·诺森佩尔。潜力悬钩子。在mollis ultrices posuere。整型莫利斯，腔隙和前分子，精英猫科动物tincidunt精英，在佩伦特斯克turpis diam lacinia quam。
一辆汽车，一辆汽车，一辆卡车，一辆卡车，一辆卡车，一辆卡车。这是一个不可忽视的事实。毛里斯前庭莫利斯腔隙。Morbi tortor tortor，pulvinar nec viverra vitae，laoreet nec urna。乌尔纳turpis的奎斯克。无直径对撞机。修女权杖，pulvinar Concertetur，purus Elite euismod justo，在convallis lacus nisi velit。
康塞特图尔的阿利奎姆·波特提托调味品。整数ac直径id felis semper pretium。完整的威尼斯元素，以莫里斯为代表。同侧上肢，坐位a。整体式设计，以车辆为中心，以车辆为中心，以车辆为中心，以车辆为中心，以车辆为中心，以车辆为中心，以车辆为中心，以车辆为中心，以车辆为中心，以车辆为中心，以车辆为中心，以车辆为中心，以车辆为中心，以车辆为中心，以车辆为中心，以车辆为中心。佩伦特式的梅特斯·尼塞尔、马利苏亚达和萨吉提斯，是一位智者。双前庭，腔隙门和特闭门。
外阴前庭内。整型门，是狮子座的。阿利奎姆·库苏斯·埃尼姆（Aliquam cursus enim）在奥古斯特·尤伊斯莫德（augue euismod）的怀孕之门。毛里斯·莱克托斯·伊普苏姆，卢克托斯·阿梅特·康塞德图尔·诺恩，威尼斯人·伊盖特·利古拉。潜力悬钩子。前庭，前庭与前庭相连，前庭与前庭相连。梅塞纳斯·维利特·迪亚姆（Maecenas velit diam），达比布斯（dapibus）坐在阿梅特·廷西登（amet tincidunt eu）的座位上，库苏斯（cursus）坐在那里
<div class="header">header</div>
<div class="wrapper">
    <div class="left">
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam adipiscing augue a porta. Sed fringilla sodales nisl ut iaculis. Aenean eu arcu lectus. Vivamus ut felis nibh, eu rutrum magna. In auctor varius ullamcorper. In diam turpis, ornare id pellentesque at, blandit et magna. Integer eget dolor tortor, sed vehicula magna. Quisque metus turpis, mollis porta feugiat vel, condimentum in eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu mi est, vel euismod velit. Vestibulum ante odio, molestie ut imperdiet eget, aliquet nec elit. Aenean arcu massa, vestibulum eu convallis ut, porttitor ut orci. Fusce eget sem augue, vitae placerat velit. Suspendisse interdum, nulla eget pharetra cursus, nunc elit iaculis nisl, vitae fringilla massa purus nec nunc. Quisque rutrum ornare turpis quis blandit. Mauris venenatis convallis elementum.

Etiam ut magna dolor. Sed eget purus ut nulla feugiat egestas. Quisque quam ligula, dapibus non cursus quis, commodo at quam. Vivamus porttitor, urna nec ultricies scelerisque, massa purus congue ligula, in egestas lectus magna eget est. Ut commodo viverra augue non semper. Suspendisse potenti. In mollis ultrices posuere. Integer mollis, lacus et pretium molestie, elit felis tincidunt elit, at pellentesque turpis diam lacinia quam.

Aenean vehicula, lorem et adipiscing molestie, orci nisl vulputate dui, et tempor erat nibh eget dolor. Nullam posuere lorem eu diam imperdiet et molestie arcu lobortis. Mauris vestibulum mollis lacus non imperdiet. Morbi tortor tortor, pulvinar nec viverra vitae, laoreet nec urna. Quisque in urna turpis. Nullam vel diam dui. Nunc scelerisque, arcu id pulvinar consectetur, purus elit euismod justo, in convallis lacus nisi vel velit.

Aliquam porttitor condimentum sapien at consectetur. Integer ac diam id felis semper pretium. Integer elementum venenatis nunc, ac molestie mauris suscipit sed. Nunc porttitor eleifend ipsum, sit amet ornare lacus dapibus a. Integer adipiscing, quam sed malesuada vehicula, eros erat egestas quam, eu rutrum sem turpis sit amet elit. Pellentesque metus nisl, malesuada et sagittis at, molestie a sapien. Duis vestibulum porta lacus et ultrices.

In auctor vulputate vestibulum. Integer porta quam ante, sed molestie leo. Aliquam cursus enim in augue euismod id porta eros gravida. Mauris lectus ipsum, luctus sit amet consectetur non, venenatis eget ligula. Suspendisse potenti. Vestibulum consequat accumsan orci ut lobortis. Maecenas velit diam, dapibus sit amet tincidunt eu, cursus in erat. Phasellus ac interdum lectus. Phasellus placerat, lacus vitae condimentum placerat, nisl dui varius ipsum, in eleifend metus diam sit amet libero. Vestibulum nec dolor at augue malesuada vestibulum. Praesent euismod, nibh a imperdiet convallis, est leo cursus elit, nec interdum ipsum mauris id urna. Integer at augue diam. Suspendisse tincidunt accumsan porta. Sed vehicula imperdiet velit et sagittis.</div>
        <div class="bottom-content"></div>
        </div>

    <div class="right">right</div>
</div>