Question

这是我的标题 CSS：

#header {
    font-size: 3rem;
    width: 100%;
    height: 4.5em;
    display: flex;
    align-items: center;
    padding-left: 1em;
}

如您所见，它设置为 100% 宽度。然而，在网站上，它是这样显示的，底部有一个水平滚动条：

出于某种原因，标题超出了 html 标签。 overflow: hidden 什么都不做。 100vw 也不会改变任何东西。我的其他 div 的宽度也是 100%。在控制台中没有收到任何错误。这是我的 html：

<body onload="setBgColors()"> <!-- function that sets certain background colors using Colorthief is called on load -->
    <div id='header'>
        <div class='flag-container'><img src="images/tree.png" alt="Flag" id="flag"></div>
        <h1 id="title">Fussajle</h1>
        <button id='edit-button'>Edit</button>
    </div>
    <ul class="tabs">
        <li data-tab-target="#overview">
            <div class="tab-button" id='default-button'>
                Overview
            </div>
        </li>
        <li data-tab-target="#learn">
            <div class="tab-button">
                Learn
            </div>
        </li>
        <li data-tab-target="#more">
            <div class="tab-button">
                More
            </div>
        </li>
    </ul>
...
</body>

我的 CSS 的其余部分：

.flag-container {
    width: calc(2.75em + 10px);
    height: calc(2.75em + 10px);
    background-color: #fcfcfc;
    border-radius: 50%;
}

#flag {
    width: 2.75em;
    height: 2.75em;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #ffffff;
}

#title {
    margin-left: 1em;
}

#edit-button {
    font-size: 1.5rem;
    width: 3em;
    height: 2em;
    border-radius: 5px;
    margin-left: calc(100vw - 33em);  /* for edit button to be always on the right side of the screen relative to the vw*/
}

/* tabs */

.tabs {
    width: 100%;
    height: 3.5rem;
    display: flex;
}

.tabs li {
    width: calc(100% / 3);
    height: 100%;
}

.tabs div {
    font-size: 1.5rem;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

将不胜感激。

Answer 1

问题似乎出在 padding-left 上的 header 属性上。

#header {
    font-size: 3rem;
    width: 100%;
    height: 4.5em;
    display: flex;
    align-items: center;
    padding-left: 1em; /* Here is the issue */
    box-sizing:border-box; /* Try this solution */
}

您可以确保在标题或所有元素上设置 box-sizing:border-box。

来自 MDN：

<块引用>

box-sizing CSS 属性设置如何计算元素的总宽度和高度。 [See More]

您还可以使用 CSS 文件顶部的基本重置在所有元素上设置 box-sizing:border-box：

*{
   margin:0;
   padding:0;
   box-sizing:border-box;
}

网站页眉超过 100% 宽度

1 个答案: