Question

我遇到了以下问题。

我有这个页面结构：

<body>
    <nav></nav> // position absolute, width 300px
    <main></main> // position relative, width 100%
 </body>

Layout

主要元素覆盖导航。我有一个jquery函数来打开导航器，将主机推向右侧。但主要因素是从我的身体走出无处，而不是保持100％的宽度。这非常符合逻辑，因为身体没有变化。

如何构建布局以实现主元素对变化的响应？

这是jsfiddle：

http://jsfiddle.net/9td4cf03/

Answer 1

我冒昧地简化了你的HTML和CSS，如下所示。

一种方法是使用绝对定位来移动nav块及其内容流动。

.st-main区块堆叠在nav。

上

单击该按钮时，可以通过展开左边距来显示nav .st-main阻止。这对CSS3过渡非常有用。

＆＃13;

$(document).ready(function () {
     $("button").on('click', function () {
         $(".st-main").toggleClass('expand');
     });
 });

＆＃13;

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.st-container {
    height: 100%;
    position: relative;
}
.st-menu {
    position: absolute;
    top: 0; left: 0;
    width: 300px;
    height: 100%;
    background-color: beige;
}
.st-main {
    position: relative;
    z-index: 1;
    height: 100%;
    margin-left: 0px;
    transition: margin-left 0.5s ease-in-out;
    background-color: lightgray;
    border: 1px dotted blue;
    box-sizing: border-box;
}
.st-main.expand {
    margin-left: 300px;
}
button {
    position: absolute;
    z-index: 2;
    top: 0; left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="st-container">
    <button>Click</button>
    <nav class="st-menu">
        <ul id="menu">
            <li>First stuff</li>
            <li>Second stuff</li>
            <li>Third stuff</li>
        </ul>
    </nav>
    <main class="st-main"></main>
</div>

＆＃13;

Answer 2

一种方法是在主元素上使用box-sizing（或者可能在所有内容上使用）。这会使padding值包含在整个width值中。实际上它允许你给它一个width:100%;，然后给它一个padding-left:300px;，300px将从100％减去。

CSS：

*,
*:before,
*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
    -webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
    -moz-box-sizing:    border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
    box-sizing:         border-box;
}

您可以通过我所展示的*将其应用于所有内容，也可以将其应用于主要内容。如果您的网站不复杂，我建议将其应用于所有内容。

更新100％宽度元素的大小

2 个答案: