html - 最小宽度等于子宽度

Question

我有一个包含页眉、内容和页脚元素的页面。这些元素周围的包装是窗口宽度的 70%。我正在寻找的是一种为此包装器设置最小宽度的方法。在我的第一个 fiddle 中，它显示了它现在的样子:http://jsfiddle.net/fwqZX/

HTML:

<div class=outerWrapper>
    <nav>
    <ul>
        <li class='active' id=tab1>Test1</li>
        <li id=tab2>Test2</li>
        <li id=tab3>Test3</li>
    </ul>
    </nav>
    <section class=content id=content>
    <div>
         sdflnsdfskdjfisahdfosad
    </div>
    </section>
    <footer>Footer</footer>
</div>

CSS:

html {
    overflow-y: scroll;
    font-family: Trebuchet MS;
    color: rgba(57,58,54, 0.8);
    text-shadow: 1px 4px 6px #fff, 0 0 0 #000, 1px 4px 6px #fff;
    font-size: 150%;
}

header, nav, footer{
    -webkit-user-select: none;       
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    white-space: nowrap;
    cursor: default;
}

body {
    margin: 0;
    text-align: center;
    background: url('dark_wall.png'), #393A36;
}

.content, footer, nav li {
    background-color: #fff;
    box-shadow: 0 0 10px -1px #000;
}

.outerWrapper {
    width: 70%;
    display: inline-block;
    min-width: 500px;
}

nav ul {
    margin: 0;
    padding: 0;
    text-align: left;
}

nav li {
    transition: all 0.2s linear;
    padding: 0.8em 0.5em;
    display: inline-block;
    min-width: 120px;
    text-align: center;
    border-radius: 5px 5px 0 0;
    margin-right:10px;
}

nav li:not(.active) {
    box-shadow: 0 -6px 10px -7px #000, 10px 0 10px -11px #000, -10px 0 10px -11px #000, inset 1px -10px 10px -11px #444;
    background-color:#eee;
    cursor: pointer;
}

nav .active {
    box-shadow: 0 -6px 10px -7px #000, 10px 0 10px -11px #000, -10px 0 10px -11px #000;
}

.content {
    padding: 1em;
    text-align:left;
    overflow: hidden;
    /*transition: height 0.2s ease-in-out;*/
}

.content div {
    transition: all 0.2s ease-in-out;
}

.content .hidden {
    opacity: 0;
}

footer {
    font-size: 0.8em;
    padding: 0.8em;
    text-align: left;
    margin: 20px 0;
}

在这个 fiddle 中，它显示了我想要的样子:http://jsfiddle.net/gkZL4/这之间的区别只是 .outerWrapper 类的最小宽度值。

第二个 fiddle 的问题是我有一个硬编码的最小宽度值。我希望 .outwrapper 的最小宽度适应导航(选项卡)的宽度。

我想阻止为此使用 javascript。如果没有它是不可能的，我将使用硬编码的最小宽度值。

如有任何帮助，我们将不胜感激。

Answer 1

您需要提供一个最小宽度，而不是一个正常的宽度。

像这样:

.outerWrapper {
    min-width: 70%;
    display: inline-block;
}