当左边没有时,在右边绝对定位div导致滚动条

Question

当左边没有时,在右边绝对定位div导致滚动条

我试图"侧翼"一个居中的div,其中一些设计元素绝对位于主div的宽度之外.由于右边的元素,我得到一个滚动条,但左边没有元素(IE6/7/8,Chrome,Firefox).如何摆脱水平滚动条？

<html>
<head>
<style type="text/css">
    html, body { 
        height: 100%; 
        width: 100%;
        margin: 0;
    }

    body { text-align: center; }

    .wrapper {
        margin: 0 auto;
        position: relative;
        width: 960px;
        z-index: 0;
    }

    .main {
        background: #900;
        height: 700px;
    }

    .right, .left {
        position: absolute;
        height: 100px;
        width: 100px;
    }

    .right { 
        background: #090;
        top: 0px;
        left: 960px;
        z-index: 1;
    }

    .left {
        background: #009;
        top: 0px;
        left: -100px;
        z-index: 1;
    }           
</style>
</head>
<body>
    <div class="wrapper">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

joe*_*tet 15

这适用于IE6-9,FF3.6,Safari 5和Chrome 5.似乎没关系我扔的是什么doctype(无,xhtml 1过渡,html5).希望这会有所帮助,这是一个有趣的问题.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body { 
    margin: 0;
    padding: 0;
    text-align: center;
}

body {
    overflow: auto;
}
#container {
    min-width: 960px;
    zoom: 1; /*For ie6*/
    position: relative; /*For ie6/7*/
    overflow: hidden;
    margin: 0 auto;
}

#main {
    background: #cea;
    width: 960px;
    margin: 0 auto;
    height: 700px;
    position: relative;
    top: 0;
}

#right,
#left {
    position: absolute;
    height: 100px;
    width: 100px;
    top: 0;
    z-index: 100;
}

#right { 
    background: #797;
    right: -100px;
}

#left {
    background: #590;
    left: -100px;
}      
</style>
</head>
<body>
    <div id="container">
        <div id="main">
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Rus*_*sti 5

在 body 标签上抛出一个 overflow-x: hidden 可以在 IE6/7 以外的任何东西中工作......但是对于这两个浏览器，您还需要将 overflow-x: hidden 添加到 html 标签。

因此，使用您现在拥有的进行此调整：

html, body { 
        height: 100%; 
        width: 100%;
        margin: 0;
        *overflow-x: hidden;
    }

body { text-align: center; overflow-x: hidden; }

Run Code Online (Sandbox Code Playgroud)

请注意，在 html, body 声明中使用 "*" hack 的原因是因为 IE8 是非常规的。如果你不使用它，IE8 也会失去垂直滚动条，而不仅仅是水平滚动条。我不知道为什么。但是那个解决方案应该没问题。

仅供参考，依赖浏览器错误通常是一个坏主意。IE 支持浏览器检测，如果它最终被修补，它不会给你带来误报或破坏。虽然对单个 CSS 行执行此操作会带来身体上的痛苦，但请查看 http://www.quirksmode.org/css/condcom.html (4认同)

Answer 3

Lou*_*ens 0

你的身体没有设置为相对的。

归档时间：	15 年，11 月前
查看次数：	16664 次
最近记录：	10 年，4 月前