带浮点的动态1或2列布局

Question

我遇到了问题，我无法弄清楚。

我有两个div：侧边栏（30％）和内容（70％）。

我的HTML和CSS看起来像这样：

HTML

<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>

CSS

#main {
width: 100%
}
#content {
    float: left;
    width: 70%;
}
#sidebar {
    float: right;
    width: 30%;
}

根据内容或让我们说出页面，＃sidebar不包含在内。在那些情况下，我希望#content填充100％而不是70％。

有没有办法实现这一点？

谢谢！

Answer 1

我看到的唯一纯CSS解决方案就是使用不同的视口。例如，如果您不想在移动设备上看到侧边栏，请使用

设置第二个样式表

#content{width:100%}
#sidebar{display:none}

否则将备用CSS集成到您正在使用的任何服务器端系统中，或者如果您需要使用<style>标记，则在标题中将其取消。