Html 为什么不是'；t溢出：隐藏工作？

看

我刚刚在页面底部添加了这个样式，上面写着“根据美国新闻排名”（在没有样式之前）：

这导致出现了一个垂直滚动条。我不想要滚动条。我搜索了一下，发现溢出：隐藏。我试过了，但没用。然后我读到，为了让它工作，元素必须有一个高度。所以我给了一个

高度：100%，但滚动条仍然存在。如何摆脱滚动条？这是我的密码：

@import "bootstrap";

#colleges_css {
width: 900px;
h3 {
    font-size: 17px;
}

.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
}

.usnews {
    display: inline;
    position: relative;
    top: 75px;
    padding: 25px;
    background-color: rgba(128, 128, 128, 0.1);
}

.name_column { width: 25px; }
.rank_column { width: 55px; }
.location_column { width: 60px; }
.setting_column { width: 90px; }
.size_column { width: 55px; }
.cost_column { width: 75px; }
.math_column { width: 70px; }

table#national_universities_table thead tr .tablesorter-header {
    background-image: url("sort_both.png");
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
}

table#national_universities_table thead tr .tablesorter-headerAsc {
    background-image: url("sort_asc.png");
}

table#national_universities_table thead tr .tablesorter-headerDesc {
    background-image: url("sort_desc.png");
}

table#liberal_arts_colleges_table thead tr .tablesorter-header {
    background-image: url("sort_both.png");
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
}

table#liberal_arts_colleges_table thead tr .tablesorter-headerAsc {
    background-image: url("sort_asc.png");
}

table#liberal_arts_colleges_table thead tr .tablesorter-headerDesc {
    background-image: url("sort_desc.png");
}

.letters {
    font-size: 8px;
    .nav-pills > .active > a {
        background-color: rgba(0, 136, 204, 0.80);
    }
}

.list {
    -moz-column-count: 4; /* Firefox */
    -webkit-column-count: 4; /* Safari and Chrome */
    column-count: 4;

    -moz-column-gap: 40px; /* Firefox */
    -webkit-column-gap: 40px; /* Safari and Chrome */
    column-gap: 40px;
    ul {
        list-style-type: square;
    }
    li {
        margin: 5px 0;
    }
    .top_li {
        margin-top: -12px;
    }
    a:hover {
        text-decoration: underline;
    }
    height: 100%;
    overflow: hidden;
}
.letter-list {
    ul {
        list-style-type: square;
    }
    li {
        margin: 5px 0;
    }
    a:hover {
        text-decoration: underline;
    }
}

}
选项1:

您可以在
选项卡内容
上使用
溢出：可见

选项2:

使用
overflow:hidden
，但这将首先切断您的
usnews
段落。要解决这个问题，请删除
位置：relative
和
顶部：75px
并添加
页边距顶部：75px
和
显示：inline block
，从
#colleges\u css.usnews
尝试
.tab content{overflow:hidden；}/code>中删除垂直滚动条，但是现在元素没有显示。然后使用
overflow:visible有效。现在我只需要给它一个底线，但它不起作用。有什么想法吗？对于选项2，边距不适用于
.usnews
，底部填充被切断。对不起，也将
内联
更改为
内联块
。您能给我解释一下吗？您应该在哪里应用溢出？为什么相对定位会把事情搞砸？内联块的处理方法是什么？溢出：隐藏是一种常用的技术，用于在页面上“包含”浮动元素（如清除）。但是我在这里没有看到这一点，所以我建议
overflow:visible
，这是该属性的默认值。相对定位通常用作基线，使孩子绝对定位。这里最好使用边距，不会造成重叠。显示内联块表示它作为内联元素放置，但其行为类似于块级元素（可以有边距、填充等）
@import "bootstrap";

#colleges_css {
width: 900px;
h3 {
    font-size: 17px;
}

.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
}

.usnews {
    display: inline;
    position: relative;
    top: 75px;
    padding: 25px;
    background-color: rgba(128, 128, 128, 0.1);
}

.name_column { width: 25px; }
.rank_column { width: 55px; }
.location_column { width: 60px; }
.setting_column { width: 90px; }
.size_column { width: 55px; }
.cost_column { width: 75px; }
.math_column { width: 70px; }

table#national_universities_table thead tr .tablesorter-header {
    background-image: url("sort_both.png");
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
}

table#national_universities_table thead tr .tablesorter-headerAsc {
    background-image: url("sort_asc.png");
}

table#national_universities_table thead tr .tablesorter-headerDesc {
    background-image: url("sort_desc.png");
}

table#liberal_arts_colleges_table thead tr .tablesorter-header {
    background-image: url("sort_both.png");
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
}

table#liberal_arts_colleges_table thead tr .tablesorter-headerAsc {
    background-image: url("sort_asc.png");
}

table#liberal_arts_colleges_table thead tr .tablesorter-headerDesc {
    background-image: url("sort_desc.png");
}

.letters {
    font-size: 8px;
    .nav-pills > .active > a {
        background-color: rgba(0, 136, 204, 0.80);
    }
}

.list {
    -moz-column-count: 4; /* Firefox */
    -webkit-column-count: 4; /* Safari and Chrome */
    column-count: 4;

    -moz-column-gap: 40px; /* Firefox */
    -webkit-column-gap: 40px; /* Safari and Chrome */
    column-gap: 40px;
    ul {
        list-style-type: square;
    }
    li {
        margin: 5px 0;
    }
    .top_li {
        margin-top: -12px;
    }
    a:hover {
        text-decoration: underline;
    }
    height: 100%;
    overflow: hidden;
}
.letter-list {
    ul {
        list-style-type: square;
    }
    li {
        margin: 5px 0;
    }
    a:hover {
        text-decoration: underline;
    }
}