在浏览器窗口中创建动态灵活的分区标记

Question

我的目标：我想创建一个HTML分区，从浏览器窗口的每个边缘设置为35px。此外，我希望这个分区标记在它自己和浏览器之间保持35px的空间，即使用户在浏览器中放大和缩小，并且浏览器最大化并且实际监视器是全屏或宽屏显示。

视觉效果：矩形形状，随着浏览器尺寸的变化动态调整其尺寸，但始终在矩形边缘和浏览器窗口边缘之间保持固定的空间。

任何有关如何实现这一目标的见解将不胜感激。如果我找到了我想要的答案，我将分享一个JS Bin示例。

答案： http://jsbin.com/uxomul/4/edit

Answer 1

这可能不是最好的方式，但这是我脑海中浮现的第一件事。

.flex {
    position: absolute;
    right: 35px;
    left: 35px;
}

Answer 2

这里的HTML和CSS似乎可以做你想要的： -

http://jsbin.com/ifolaf/1/edit

Answer 3

尝试使用100％宽度的嵌套divs容器

<div class="container">
<div class="content">
 will have 35px
<div>
</div>

.container{
width: 100%;
padding: 35px;
}

.container .content{
width: 100%;
}