Question

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

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

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

这导致了一个垂直滚动条。我不想要滚动条。我用Google搜索，发现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：

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

选项2：

使用overflow: hidden，但最初会删除usnews段。要解决此问题，请移除position: relative和top: 75px，然后从margin-top: 75px

添加display: inline-block和#colleges_css .usnews

为什么不溢出：隐藏工作？

1 个答案: