1

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

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

现在尝试调整浏览器窗口的大小，并查看随着浏览器窗口调整的 div 大小。我想它不适用于仅CSS。我对么？我怎样才能创造出这样的东西？

4

3 回答 3

4

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

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

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

你可以在这里阅读更多 ：

于 2013-02-27T03:11:54.827 回答
4

您是对的，您提供的示例中的页面没有使用普通的 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);

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

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 构建类似页面。

于 2013-02-27T03:13:50.270 回答
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>
于 2013-03-13T03:42:27.593 回答