html 页面右侧浮窗 CSS,（CSS） 带有右侧边栏的响应式页面的CSS样式

一、目的

要创建一个响应式页面：

右侧边栏为div.right-bottom，左侧内容为div.left-top。

当窗口宽度大于700px时，随着窗口大小的变化，div.right-bottom的width与height固定不变，div.left-top的width与height自动调整。

当窗口宽度小于700px时，上述div.left-top在上，div.right-bottom在下，随着窗口大小的变化，二者的width与height自动调整。

效果如下图：

二、代码与分析

2.1 第一种方案

left-top

Most people prefer comfort to its alternative. St. Francis renounced a fat inheritance to dress in rags and tend to lepers. David Blaine buried himself in a plastic coffin beneath a three-ton water tank on Sixty-eighth Street for a week. If you’re looking to push your own limits, you could take up free climbing or enter a hot-dog-eating contest.

right-bottom

But fame and fortune have a way of breeding complacency, and nothing kills comedy faster than that. The stint at Joe’s Pub was a corrective of the most American kind.

footer

@media (min-width: 700px) {

.section { /* 清浮动 */

zoom: 1;

}

.section:after { /* 清浮动 */

content: '';

display: block;

clear: both;

}

.left-top {

margin-right: 280px;

}

.right-bottom {

float: right;

width: 250px;

}

}

实现的效果如下图：

显然是不合格的。

2.2 第二种方案

我们在html代码中，把div.right-bottom移到div.left-top上方。CSS样式不变。

right-bottom

But fame and fortune have a way of breeding complacency, and nothing kills comedy faster than that. The stint at Joe’s Pub was a corrective of the most American kind.

left-top

Most people prefer comfort to its alternative. St. Francis renounced a fat inheritance to dress in rags and tend to lepers. David Blaine buried himself in a plastic coffin beneath a three-ton water tank on Sixty-eighth Street for a week. If you’re looking to push your own limits, you could take up free climbing or enter a hot-dog-eating contest.

footer

实现的效果如下图：

在窗口宽度小于700px时，右侧边栏内容在网页上方显示，不合格。

2.3 第三种方案

我们在html代码中，将div.right-bottom重新移到div.left-bottom下方，并改变div.right-bottom的样式。CSS代码如下：

@media (min-width: 700px) {

.section {

position: relative; /* 为了配合 div.right-bottom 的绝对定位 */

zoom: 1; /* 清浮动 */

}

.section:after { /* 清浮动 */

content: '';

display: block;

clear: both;

}

.left-top {

margin-right: 280px;

}

.right-bottom {

position: absolute; /* 绝对定位 */

top: 0;

right: 0;

width: 250px;

}

}

实现效果如下：

乍一看，已经符合要求，但是，在窗口宽度大于700px条件下，调整窗口宽度大小，当div.left-top高度小于div.right-bottom时，问题出现了：

由于div.right-bottom采用了绝对定位，脱离了标准文档流，所以div.section的height就等于div.left-top的height。div.footer与div.right-bottom重叠。

2.4 第四种方案(正确方案)

前三种方案都有问题，那么，这个问题应该怎么解决呢？请看下列代码。

left-top

Most people prefer comfort to its alternative. St. Francis renounced a fat inheritance to dress in rags and tend to lepers. David Blaine buried himself in a plastic coffin beneath a three-ton water tank on Sixty-eighth Street for a week. If you’re looking to push your own limits, you could take up free climbing or enter a hot-dog-eating contest.

right-bottom

But fame and fortune have a way of breeding complacency, and nothing kills comedy faster than that. The stint at Joe’s Pub was a corrective of the most American kind.

@media (min-width: 700px) {

.section {

zoom: 1; /* 清浮动 */

}

.section:after { /* 清浮动 */

content: '';

display: block;

clear: both;

}

.left-top-wrapper {

width: 100%; /* 若无此句，width 则为 100% + 280px ，超出窗口宽度 */

float: left; /* 浮动，脱离标准文档流，使 div.right-bottom-wrapper 的顶端与之平齐 */

margin-right: -280px; /* 右侧让出 280px，放置 div.right-bottom */

}

.left-top {

margin-right: 280px; /* 让出280px，以免文字与 div.right-bottom重叠 */

}

.right-bottom {

float: right;

width: 250px;

}

}

实现效果如下：

尤其注意在窗口宽度大于700px条件下，调整窗口宽度大小，当div.left-top高度小于div.right-bottom时的效果：

参考