Question

我正在尝试获取左侧菜单和右侧横幅并让它们在中心面板滚动文本时保持固定 - 由于尺寸，横幅必须位于中心面板的顶部 - 颜色方案为白色黑色背景上的文字，但菜单是<ul>，有自己的配色方案

我对css很新，所以可能已经对自己做了一些事 - 我已经尝试了但是当前右上方的横幅确实在滚动时保持固定但是文本覆盖它并且左上方的菜单从屏幕上拍摄

<head>
<style>
#container {
    width:90%;
    height 100%;
    background-color:Black;
    margin: 0 auto;
    text- align: left;
}
#banner {
    float: right;
    background-color:black;
    width:40%;
    top:1;
    right:1;
    position:fixed
}
#sidebarmenu {
    float: left;
    width: 10%;
    background-color:Black;
    padding: 15px 10px 15px 20px;
    top:1;
    left:1;
    position:fixed
}
#mainContent {
    background-color: Black;
    color:White;
    position: absolute;
    left: 120px;
    width: 50%;
    top:220;
    margin: 0 0 0 15%;
}
body {
    color: white;
    background-color: black;
}
.sidebarmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: bold 13px Verdana;
    width: 180px;
    border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li a {
    display: block;
    overflow: auto;
    color: black;
    text-decoration: none;
    padding: 6px;
    border-bottom: 1px solid #778;
    border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active {
    background-color: #c0c0c0;
}
.sidebarmenu ul li a:visited {
    color: white;
}
.sidebarmenu ul li a:hover {
    background-color: black;
    color:red;
}

</style>
</head>
<body>
<div id="container">
<div id="banner" ><img style="float:right" alt="logo text" src="/banner.png" /></div>
<div id="mainContent" >TEXT</div>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="index.html">Home</a></li>
<li><a href="1.html">Info</a></li>
<li><a href="11.php">Contact Us</a></li>
<li><a href="2.php">Page 2</a></li>
<li><a href="3.php">Page 3</a></li>
<li><a href="4.php">Page 4</a></li>
<li><a href="5.php">Page 5</a></li>
<li><a href="6.php">Page 6</a></li>
</ul>
</div>
</div>
</body>

Answer 1

唷！从哪儿开始？大声笑你的代码需要在每一行都得到修复。我在这里有一个重做的演示，但基本上，当你定位元素时，你必须注意网站架构。组织就是一切都是前端发展。

请参阅DEMO

Answer 2

首先，一旦你开始使用 position：absolute; 或 position：fixed; ，使用 float 和 margin < / strong>变得无关紧要。

此外，使用顶部：x; ，左：x; ，右：x; 或底部：x ; 始终确保为您的值添加尺寸单位，即顶部：1; 应顶部：1px;

如果我从您发布的CSS中正确理解，那么可以让您更接近您想要实现的目标：

html,body{ margin: 0; padding: 0; color: #fff; background: #000; height: 100%; width: 100%; overflow: hidden; } #container { width:100%; height: 100%; text-align: left; overflow: auto; border: 1px red solid;} #mainContent { width: 90%; color: #fff; margin: 0 auto; } #banner { background-color: #000; width:40%; top:1px; right:1px; position:fixed; } #sidebarmenu { width: 10%; background: #000; padding: 15px 10px 15px 20px;top:1px;left:1px;position:fixed; }

看看我做的 jsfiddle ，看看这个css做了什么：http://jsfiddle.net/beYuC/

注意：您可能已经注意到我使 html 和正文的高度为100％。这是因为除非您为 html 和正文设置了一个高度，否则您想要100％制作的页面上的任何其他元素都将被展平。

注2：请务必查看此网站及其CSS，以获取100％高度的完善内容容器和侧边栏菜单的示例：http://www.jlescure.com/

CSS定位和滚动

2 个答案: