最小宽度等于子宽度

Question

我有一个包含页眉、内容和页脚元素的页面。围绕这些元素的包装是窗口宽度的 70%。我正在寻找的是一种为此包装器设置最小宽度的方法。在我的第一个小提琴中，它显示了现在的情况：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;
}

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

第二个小提琴的问题是我有一个硬编码的最小宽度值。我希望 .outwrapper 的最小宽度能够适应导航（标签）的宽度。

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

对此的任何帮助将不胜感激。

Answer 1

您需要给出最小宽度而不是正常宽度。

把它变成这样：

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

Answer 2

否则，如果仍然希望它是 width:70%; 或任何适合内容的大小 (width:auto;/* wich is equal to not give width at all */) + margin:auto;
请改用 display:table。

使用 display:table 可以让您不必太在意有多少选项卡或多少内容。然后，CSS 可以在任何类似的结构和类名中重用。 演示（没有宽度/宽度或最小宽度和 3/4 选项卡内容更宽/更小） http://jsfiddle.net/gkZL4/2/

.outerWrapper, .nowidth {
    display: table;/*or inline-block*/
    margin:auto;/* inefficient if inline-block, set text-align:center on parent */
}
.width {
    width:70%;
}
.minwidth {
    min-width:70%;
}

如果您认为display:table 不适合旧版浏览器，则应首先注意display:inline-block。 IE6 将宽度应用为最小宽度，IE7 将应用给定宽度或全宽。 （块级元素上使用的任何 display:inline-block 规则都需要针对这两个 IES => haslayout 进行调整：display:inline; 和 zoom:1;

你可以添加一个 max-width 和 overflow-x:auto;到 #content 以避免它的宽度变大。