css - 宽度和高度流体设计

Question

http://www.juliabailey.com/

该网站设计流畅，运行良好。

http://goo.gl/j6snn

这是我的网站。流体 View 取决于宽度。因此，当我的浏览器变大时，宽度和高度都会变大。但问题是高度太大并创建了我不想要的滚动条。我不想在我的页面上显示什么滚动条。我认为最好的方法是根据高度使用流畅的 View ，因此无论您的浏览器是 800x600 还是 1600x1200，它始终适合浏览器。我该怎么做？

这是我的封装代码；

#wrapper {
    width:auto;
    height:auto;
    width:80%;
    min-width:550px;
    max-width:1150px;
    margin:50px auto 0 auto;
    z-index:100;
    }

Answer 1

使用百分比作为类的属性。例如:

wrapper {
width: 92%;
}
content {
width: 73%;
}
sidebar {
width: 25%
}

输入东西或

您还可以使用 javascript 来检测您需要什么，然后动态更改实现。有点像这样

    function dynamicLayout(){ var browserWidth = getBrowserWidth();  
    // Narrow CSS rules 
if (browserWidth < 640){ changeLayout("narrow"); } 
    // Normal (default) CSS rules 
if ((browserWidth >= 640) && (browserWidth <= 960)){ changeLayout("default"); } 

    // Wide CSS rules 
if (browserWidth > 960){ changeLayout("wide"); } }

在你的例子中，你有一个最小宽度属性，这意味着如果它小于你将有滚动条。如果您不想要滚动条，则不能为任何布局元素设置任何静态值，因此它可能会随浏览器窗口大小而变化。