Question

我一直在努力建立一个始终保持其比例并适应用户屏幕尺寸的网站，但我无法实现这一目标。

我开始构建一个简单的固定宽度/高度框架，如下所示：http://jsfiddle.net/WxNrh/并开始玩它，但我总是卡住。

我想要实现的是最大宽度为800px，并且取决于用户的屏幕分辨率（或者我缩小浏览器窗口的程度），网站会相应缩小，但始终保持其宽高比。

这是我的固定网站：

<div id="wrapper">
<div id="header">Header</div>

<div id="content">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>

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

和css：

#wrapper{width: 800px; height: 400px;}
#header{background-color: red; width: 800px; height: 100px;}
#left{float: left; background-color: yellow; width: 200px; height: 200px;}
#right{float: left; background-color: orange; width: 600px; height: 200px;}
#footer{clear: both; background-color: blue; width: 800px; height: 100px;}

我真的很感激任何帮助！：）

编辑：

我用这个css获得了预期的效果：

#wrapper{max-width: 800px;}
#header{background-color: red; width: 100%; padding-top: 12.50%;}
#left{float: left; background-color: yellow; width: 25%; padding-top: 25.00%;}
#right{float: left; background-color: orange; width: 75%; padding-top: 25.00%;}
#footer{clear: both; background-color: blue; width: 100%; padding-top: 12.50%;}

但问题是它的工作方式是使用填充，这会强制我的div内容下降，这意味着它不是很有用 - 因为内容不在它应该的位置。

Answer 1

瞧。 http://jsfiddle.net/rudiedirkx/WxNrh/2/show/

padding救援。但它并不是很有用，因为你的内容可能不适合方框......

神奇的是相对填充和绝对定位：

.outer {
    height: 0;
    position: relative;
    /* padding-bottom: 25%; in the actual div like #header */
}
.inner {
    position: absolute;
    width: 100%;
    height: 100%;
}

和一大堆包装器divs =（（.inner和.outer）：

<div class="outer" id="wrapper">
    <div class="inner">
        <div class="outer" id="header">
            <div class="inner">Header</div>
        </div>
        <div class="outer" id="content">
            <div class="inner">
                <div class="outer" id="left">
                    <div class="inner">Left</div>
                </div>
                <div class="outer" id="right">
                    <div class="inner">Right</div>
                </div>
            </div>
        </div>
        <div class="outer" id="footer">
            <div class="inner">Footer</div>
        </div>
    </div>
</div>

有一种情况非常有用。有时你真的需要保持这种宽高比：响应式视频。对于内容框和整个页面：不太有用。

但你问了！

Answer 2

尝试这样的事情：

#wrapper{width: 800px; height: 400px;}
#header{background-color: red; width: 100%; height: 25%;}
#left{float: left; background-color: yellow; width: 25%; height: 25%;}
#right{float: left; background-color: orange; width: 75%; height: 25%;}
#footer{clear: both; background-color: blue; width: 100%; height: 25%;}

使用百分比可能不适用于float: left;。看看它如何。如果失败，您可以尝试使用max-width和max-height或min-width和min-height。

Answer 3

使用图像与驱动器比率

我发现做比率的最佳方法通常是使用img设置为您想要的比例，然后驱动容器大小。

修改原始代码的

Here is an example fiddle ：

<强> HTML

<div id="wrapper">
    <img class="ratioDriver" src="http://dummyimage.com/200x100/000/fff.gif&text=2w:1h+Ratio" />
    <div id="header">Header</div>

    <div id="content">
        <div id="left">Left</div>
        <div id="right">Right</div>
    </div>

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

<强> CSS

body {
    margin: 0;
    padding: 0;
}

#wrapper{
    width: 100%; 
    max-width: 800px; 
    position: relative;
    margin: 0 auto;
}

.ratioDriver {
   width: 100%;   
   display: block; 
}

#header{
    background-color: red; 
    width: 100%; 
    height: 25%; /* 100 / 400 = .25 = 25% */
    position: absolute;
    top: 0;
    left: 0;
}
#left{
    position: absolute;
    top: 25%;
    left: 0;
    background-color: yellow; 
    width: 25%; /* 200 / 800 = .25 = 25% */
    height: 50%; /* 200 / 400 = .5 = 50% */
}
#right{
    position: absolute;
    top: 25%;
    left: 25%;
    background-color: orange; 
    width: 75%; 
    height: 50%;
}
#footer{
    position: absolute;
    top: 75%;
    left: 0;
    background-color: blue; 
    width: 100%; 
    height: 25%;
}

处理内容的两种方法

您仍然需要决定如何处理您的内容。

选项1

您是否希望to have separate scroll bars on overflow在您的组件上使用overflow: auto？如果内容的大小未知，这是最佳选择。

选项2

您是否想尝试缩放它，这需要一个固定大小的内容供您计算因子。这实际上只是可行in modern browsers（在Firefox 19和IE9中运行良好，但在撰写本文时Chrome 25无法正常运行）。这个fiddle roughly achieves it使用了对上述css的这些添加内容以及html中的一些添加内容：

html {
    font-size: 1vw;
}
 #header{
    font-size: 3rem;
}
#left{
    font-size: .99rem;
}
#right{
    font-size: 1.25rem;
}
#footer{
    font-size: 1.3rem;
}

建立一个始终保持比例的网站

3 个答案:

使用图像与驱动器比率

处理内容的两种方法