Question

请到这里： http://demo.thecogworks.co.uk/umbraco/login.aspx

使用此帐户登录：用户：demo 密码：密码

现在尝试调整浏览器窗口的大小，并使用浏览器窗口查看div调整大小。我想它只适用于css。我对么？我怎样才能创造出类似的东西？

Answer 1

它仅适用于css（如果您希望在移动设备上正确显示，也可以使用“viewport”元标记）。

如果您希望您的html页面表现得像那样，您必须使用％作为宽度（宽度：例如100％）。在这种情况下，div的宽度将基于（相关）大小视口。

这就是所谓的灵活布局。这是创建响应式网页的方式之一。

您可以在这里阅读更多内容：

http://www.flexiblewebbook.com。（这是一本关于不同类型布局的书）
http://alistapart.com/article/responsive-web-design（作为开始）

Answer 2

你是对的，你提供的例子中的页面不是使用普通的css，而是使用javascript来渲染窗口大小的css。

示例中的一行（在html输出中使用内联样式）：

<div id="treeWindow" class="panel" style="height:380px;width:200px;">

因此，示例文档样式中的所有度量都以绝对单位分配 - 以px为单位，并且不在浏览器窗口调整大小时调整。因此，在调整大小方面，它使用类似

的东西

var clientWidth=jQuery(window).width();
var leftWidth=parseInt(clientWidth*0.25);

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

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

和功能

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

然后将

应用于treeWindow对象

resizeGuiWindow("treeWindow",leftWidth,treeHeight);

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

阅读有关响应式设计，自适应css和流体布局的更多信息。

编辑：我几乎与Georgii同时发布了答案。即使他没有直接回答关于你的示例页面的问题，他说的都是正确的，他在灵活的布局上添加了一些很好的资源，在那里你可以找到所有信息，只用css构建一个类似的页面。

Answer 3

在对流体布局进行重新分析后，我终于能够在CSS中创建整个布局（没有javascript）。以下是jsfiddle中的工作版本：http://jsfiddle.net/Yv4ja/适用于以后可能需要它的人：

CSS：

    .left{
    position:absolute;
    width:30%;
    background:red;
    left:0;
    bottom:0px;
    top:100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.right{
    overflow:hidden;
    background:green;
    position:absolute;
    right:0;
    width:70%;
    bottom:0px;
    top:100px;
}

html, body{
    min-height:100%;
    height:100%;
    padding:0px;
    margin:0px;
    position:relative;
}



.header{
    width:100%;
    height:100px;
    background:yellow;
}

.left .content {
    background:blue;
    position:absolute;
    top:5px;
    left:5px;
    right:5px;
    bottom:100px;
    overflow:auto;
    padding:5px;
    border:1px solid yellow;
}

.left .bottom-content {
    height:100px;
    position:absolute;
    left:5px;
    right:5px;
    bottom:5px;
    background:black;
}

HTML：

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

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

3 个答案: