使div填充浏览器视口的其余部分 [英] make div fill the rest of the browser viewport

问题描述

所以我有一个正常的960px布局，我想添加一个可以在960内使用300px的div，其余的空间(浏览器宽度)我想用该div填充...但始终保持不变在包装纸内的位置(我不是在谈论垂直固定元素)

so i have a normal 960px layout, i want to add a div that can use 300px inside that 960 and the rest of the space (browser width) i want to fill with that div...but always stay on the same position inside the wrapper (im not talking about a vertical fixed element)

我可以在不使用JavaScript的情况下做到这一点吗?但是如果没有其他选择，还可以

can i do this without using javascript? but if theres isnt another option its ok

示例:

<div class="wrapper">
    <div class="fill">Something</div>
</div>

CSS:

.wrapper {
    margin: 0 auto;
    width: 960px;
    background: #ddd;
}
.fill {
    margin: 300px 0 0 0;
    width: 300px;
    background: red;    
}

谢谢

推荐答案

如果我很了解您的需求，请尝试以下小提琴

If I well understood what you need: try this fiddle

http://jsfiddle.net/jGmcV/show/
http://jsfiddle.net/jGmcV/(源)

这应该是效果，但是我在您的wrapper周围放置了一个额外的包装纸.无论视口的大小如何，深色容器内的红色框的宽度始终为300px.

this should be the effect, but I placed an extra wrapper around your wrapper. The width of red box inside the dark container is always of 300px no matter what the size of the viewport is.

这篇关于使div填充浏览器视口的其余部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！