em 宽度的奇怪行为答案

【问题标题】：Strange behavior with em widthsem 宽度的奇怪行为
【发布时间】：2013-11-14 11:21:57
【问题描述】：

我目前正在尝试学习自适应/移动网页设计，其中涉及针对不同平台和分辨率的媒体查询，在设计中使用 em 而不是 px 等。我目前正在尝试在每个元素旁边放置两个 em-width 元素其他;我的内容旁边的导航/信息栏。

我已将信息栏设置为 16em 宽（根据字体大小转换为每 em 16px），内容为 calc(100% - 17em) 宽。我认为这应该在菜单和内容之间留下 1em 的边距，无论我缩放和调整窗口大小，但最终结果不同意：

100% 缩放

25% 缩放

朋友的屏幕

元素之间的空间随着缩放级别的变化而变化很大，尽管一切都普遍使用“em”单位，并且相关元素之间的字体大小没有改变。可能是什么问题？

信息：我正在使用媒体查询将导航从水平对齐方式转换为侧边栏。正在运行的是查询的版本。在查看 CSS 时请记住这一点。这可能是问题的一部分，尽管我非常怀疑......

#contentwrap {
    margin-top: 1em;
    border: 1px solid #000;
    border-radius: 8px;    
}

#content {
    border-radius: 8px;
    padding: 2em;

#navbar {
    margin-top: 1em;
    border: 1px solid #000;
    border-radius: 8px;
    width: 100%;
    display: table; 
    font-family: 'Cabin', sans-serif;  
}

.navelement {
    font-size: 0.8em;
    width: 25%;
    padding: 1em;
    text-align: center;
    display: table-cell;
}

#nav4 {
}

@media (min-width:1580px) { 
    #navbar {
        border: 1px dashed red;
        padding: 0px;
        width: 16em;
        float: left;
        background-image: none;
    }

    .navelement {
        font-size: 0.8em;
        background-image: url('../img/navbg.png');
        background-size: 100% 100%; 
        width: 20em;
        display: inherit;
        border: 1px solid;
        border-color: #303030 #101010 #101010 #101010;
        border-radius: 8px;
        margin-bottom: 1.25em;
        padding: 1.25em;
    }

    #nav4 {
        background-image: url('../img/navbg.png');
        background-size: 100% 100%;
        margin-bottom: 0em;
    }

    #contentwrap {
    float: right;
    width: -moz-calc(100% - 17em);
    width: -webkit-calc(100% - 17em);
    width: calc(100% - 17em);
    }
}

HTML 代码：

<div id="navbar">
            <div id="nav1" class="navelement"><b>Current news post:</b><br/>"Welcome to usp3!"<br/>by ividyon</div>
            <div id="nav2" class="navelement"><b>Current MOTW:</b><br/>"Some Map"<br/>by some guy</br>[ Link to thread ]</div>
            <div id="nav3" class="navelement"><b>Recent additions:</b><br/>- "Some map" review by Delacroix<br/>- Article: "Blah blah blah.." by ividyon<br/>- "Some other map" review by ividyon</div>
            <div id="nav4" class="navelement">Recent forum posts:</br>- "This design is not good!"<br/>by A Dude</br>- "Too lazy to type filler..."<br/>by ividyon</br>- "Too lazy to type filler..."<br/>by ividyon</br>- "Too lazy to type filler..."<br/>by ividyon</div>
        </div>

        <div id="contentwrap">
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut purus tortor. Maecenas ut semper dui, ac convallis libero. Vivamus molestie mauris a mauris pretium, et dignissim mauris dictum. Vivamus et interdum ipsum, vitae facilisis massa. In auctor convallis feugiat. Nulla sit amet accumsan ipsum. Sed risus felis, sodales ornare nisl a, scelerisque fringilla neque.</p>
            </div>
        </div>

【问题讨论】：

您应该尝试百分比宽度。比如侧边栏占 20%，主要区域占 75%。
我希望侧边栏的宽度保持一致。主要区域已经使用了计算百分比（100% 减去侧边栏宽度和边距）。
您在 CSS 中 #navbar 之前缺少一个 }，而您的 HTML 中有许多 </br>s。先解决这些问题。

标签： css width margin em

【解决方案1】：

#navbar 的内容比您为 #navbar 本身指定的宽度宽。

#navbar 为 16em+2px = 258px（字体大小为 16px），而内容为 20em+2.5em+2px = 290px（字体大小为 12.8px）。

而且由于#navbar 有display:table，它自己的宽度会自行调整到其子元素的宽度，而不是让内容溢出其边界。表格就是这样做的。

所以，calc(100%-17em) 剩下的就不行了。要么计算一个更小的宽度，要么，因为导航栏有float:left，你可以完全忽略宽度！如果需要，只需设置左边距即可。

见Fiddle。

【讨论】：