4

body{margin:0;}不要なスクロールバーに遭遇したのはこれが2回目で、 ;を追加して修正したのは初めてです。しかし、今回は何が起こっているのかわかりません。何か案は？

HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="Style-Sheets/style.css" />
        <!--[if IE]><link rel="stylesheet" type="text/css" href="Style-Sheets/ie.css" /><![endif]-->
        <!--[if !IE 7]><link rel="stylesheet" type="text/css" href="Style-Sheets/!ie7.css" /><![endif]-->
        <!--[if OPERA]><link rel="stylesheet" type="text/css" href="Style-Sheets/opera.css" /><![endif]-->
        <link rel="icon" href="Favicons/favicon.jpg" />
        <!--<base target="_blank" />-->
        <title>Home</title>
    </head>
    <body>
        <div id="wrap">
            <div id="header">
                <p class="title">Title</p>
                <p class="nav-down"><span class="verticle-bar">|</span>&nbsp<a class="navigation" href="index.html">Home</a>&nbsp<span class="verticle-bar">|</span>&nbsp<a class="navigation" href="about.html">About</a>&nbsp<span class="verticle-bar">|</span>&nbsp<a class="navigation" href="blah/index.html">blah</a>&nbsp<span class="verticle-bar">|</span>&nbsp<a class="navigation" href="blah2.html">blah2</a>&nbsp<span class="verticle-bar">|</span></p>
            </div>
            <div id="body">
            </div>
        </div>
        <div id="footer">
            <div class="footer">
                <span class="verticle-bar">|</span>&nbsp
                <a class="footer-link" href="">About The Developer</a>&nbsp
                <span class="verticle-bar">|</span>
            </div>
        </div>
    </body>
</html>

CSS :(ページに影響を与える唯一のスタイルシートである（またはそうあるべき）style.cssから）

html {
height:100%;
margin:0;
padding:0;
background-color:#FFFFFF;
text-align:center;
font-family:arial;
line-height:1.5;/*test*/
color:black;
}

body {
margin:0;
height:100%;    
}

p {
margin:0;
padding:0;
}

#wrap {
min-height:100%;
}

#header {
z-index:2;
position:fixed;
top:0;
left:0;
right:0;
height:4.25em;
background-color:#6D8CE7;
font-family:gabriola;
line-height:1em;
letter-spacing:0.2em;
}

.title {
font-size:3em;
line-height:1.0em;
color:white;
}

#body {
margin-left:5em;
margin-right:5em;
padding-top:4.25em;
overflow:auto;
padding-bottom:4em; /* must be same height as footer */
}

#footer {
position:relative;
margin-top:-4em; /* negative value of footer height */
height:4em;
clear:both;
}

.footer {
position:absolute;
left:0;
right:0;
bottom:0;
}

.verticle-bar {
color:black;
font-family:gabriola;
}

a.navigation:link {
text-decoration:none;
color:black;
}

a.navigation:visited {
text-decoration:none;
color:black;
}

a.navigation:hover {
text-decoration:underline;
color:black;
}

a.navigation:active {
text-decoration:underline;
color:black;
}

.footer-link {
font-family:gabriola;
}

a.footer-link:link {
text-decoration:none;
color:#CC5500;
}

a.footer-link:visited {
text-decoration:none;
color:#CC5500;
}

a.footer-link:hover {
text-decoration:underline;
color:#CC5500;
}

a.footer-link:active {
text-decoration:underline;
color:#CC5500;
}
4

3 に答える 3

8

簡単な修正はoverflow: hidden、のCSSに追加すること#footerです。

注：#bodyコンテンツがビューポートから流出した場合でも、スクロールバーは表示されます。

フィドル

#footer {
    overflow:hidden;
    position:relative;
    margin-top:-4em;
    /* negative value of footer height */
    height:4em;
    clear:both;
}
于 2013-03-25T18:51:11.057 に答える
2

htmlタグのoverflow：hiddenプロパティを次のように使用します

html
{
  overflow: hidden;
}

不要なスクロールバーを削除します。

デフォルトでは、htmlタグの場合、このプロパティは自動です。

于 2016-02-08T12:38:26.387 に答える
0

スクロールバーを非表示にする方向に応じて

  1. 水平方向

    html {overflow-x：非表示; }

  2. 垂直方向

    html {オーバーフロー-y：非表示; }

注意：

オーバーフロー：非表示; =>水平と垂直の両方なので、注意して、実際に何が欲しいかを知ってください。

于 2020-11-27T18:52:40.603 に答える