0

我有一个带有页眉、内容和页脚元素的页面。围绕这些元素的包装是窗口宽度的 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。如果没有它是不可能的，我将使用硬编码的最小宽度值。

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

4

2 回答 2

1

You need to give a min-width in stead of a normal width.

Make it like this:

.outerWrapper {
    min-width: 70%;
    display: inline-block;
}
于 2013-06-13T14:11:31.537 回答
0

否则，如果仍然希望它是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 以避免它变得太大 width 。

于 2013-06-13T14:40:21.763 回答