html - 为什么不溢出 : hidden working?

Question

参见 http://www.collegeanswerz.com/colleges .

我刚刚将此样式添加到“Ranks according to US News”页面底部。 (在它没有样式之前):

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

这导致了垂直滚动条。我不想要滚动条。我四处搜索，发现 overflow: hidden;。我试过了，但没用。然后我读到它要工作，元素必须有一个高度。所以我给了一个height: 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;
    }
}

Answer 1

选项 1:

您可以在 .tab-content 上使用 overflow: visible。

选项 2:

使用 overflow: hidden，但这最初会截断您的 usnews 段落。要解决这个问题，请删除 position: relative 和 top: 75px 并添加 margin-top: 75px 和 display: inline-block 来自 #colleges_css .usnews