将固定标题和侧边栏居中？

发布于 2024-12-02 01:16:57 字数 774 浏览 1 评论 0原文

我正在尝试使用固定标题和侧边栏创建布局，但我不想将布局放在浏览器的中心。显然，这是一个问题，因为固定通常不允许这样做。我考虑过对所有内容进行包装并使用 margin: 0px auto;等等，但这不起作用，是否可能？

   #header {
position: fixed;
top: 0;
left: 0;
width: 100%; 
height: 150px;
background-color: #FFF;
z-index: 100;
}


#content {
width: 1112px;
overflow: auto;
padding-top: 150px;

}


#sidebar {
position: fixed;
top: 0;
left: 0;
width: 275px;
height: 100%;
z-index: 100;

}

想到了这样的事情，但它不起作用：

body {
    margin:0px 0px; padding:0px;
    text-align:center;  
}


#wrapper {
text-align: left;
margin: 0px auto;
}

divs：

<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
</div>

原文

I am trying to create a layout using a fixed header and sidebar but I wan't to make the layout in the center of the browser.. Obvisously this is a problem as fixed usually doesn't allow this. I thought about putting a wrapper around everything and using margin: 0px auto; etc. but that didn't work, is it possible or not?

   #header {
position: fixed;
top: 0;
left: 0;
width: 100%; 
height: 150px;
background-color: #FFF;
z-index: 100;
}


#content {
width: 1112px;
overflow: auto;
padding-top: 150px;

}


#sidebar {
position: fixed;
top: 0;
left: 0;
width: 275px;
height: 100%;
z-index: 100;

}

Had in mind something like this but it didn't work:

body {
    margin:0px 0px; padding:0px;
    text-align:center;  
}


#wrapper {
text-align: left;
margin: 0px auto;
}

divs:

<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不必你懂 2024-12-09 01:16:57

试试这个：

CSS：

body {
margin:0; 
padding:0; 
}


#wrapper {
margin: 0 auto 0 auto;
width:1112px;
min-height:600px;
height:auto;
background-color:#009900;
}

#header {
position: fixed;
width: 1112px; 
height: 150px;
background-color: #ccc;
z-index: 100;
}


#content {
position:absolute;
top:150px;
margin-left:275px;
overflow: auto;
width:837px;  /* 1112px - 275px = 837px */
background-color:#CC9900; 
}


#sidebar {
position: fixed;
top:150px;
width: 275px;
height: 100%;
min-height:200px; /* just do simulate content */
z-index: 100;
background-color:#96F;
}

HTML：

<div id="wrapper">
<div id="header">Fixed header</div>
<div id="content">
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
</div>
<div id="sidebar">Fixed sidebar</div>
</div>

如果我理解你的问题，我认为这是一种可能的方法。尝试一下，然后告诉我！ :)

Try this:

CSS:

body {
margin:0; 
padding:0; 
}


#wrapper {
margin: 0 auto 0 auto;
width:1112px;
min-height:600px;
height:auto;
background-color:#009900;
}

#header {
position: fixed;
width: 1112px; 
height: 150px;
background-color: #ccc;
z-index: 100;
}


#content {
position:absolute;
top:150px;
margin-left:275px;
overflow: auto;
width:837px;  /* 1112px - 275px = 837px */
background-color:#CC9900; 
}


#sidebar {
position: fixed;
top:150px;
width: 275px;
height: 100%;
min-height:200px; /* just do simulate content */
z-index: 100;
background-color:#96F;
}

HTML:

<div id="wrapper">
<div id="header">Fixed header</div>
<div id="content">
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
<p>Dummy Text</p><br /><br /><br />
</div>
<div id="sidebar">Fixed sidebar</div>
</div>

If I understand your question, I think this is a possible way to do it. Try it, and tell me so! :)

回复收藏 0 原文

安穩 2024-12-09 01:16:57

不确定我是否理解正确 - 你的意思是这样的？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        body {margin:0;padding:0;}
    .wrapper {position:relative;margin:0 auto;width:600px;}
#header {
position: fixed;
top: 0;
left: 0;
width:100%;
height: 150px;
background: #ccc;
z-index: 100;
}
#content {
padding-top: 150px;
width:400px;
background:green;
overflow:auto;
}
#sidebar {
width: 200px;
padding-top: 150px;
float:left;
background:red;
position:fixed;
margin-left:400px;
top:0;
height:100%;
}

    </style>
</head>
<body>
<div id="header">
    <div class="wrapper">
        header
    </div>
</div>
<div class="wrapper">
    <div id="content">
        content start<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content end
    </div>
    <div id="sidebar">
        sidebar
    </div>
</div>
</body>
</html>

请注意，position:fixed 在 ie6 中不起作用。

Not sure if i get you right - you mean something like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        body {margin:0;padding:0;}
    .wrapper {position:relative;margin:0 auto;width:600px;}
#header {
position: fixed;
top: 0;
left: 0;
width:100%;
height: 150px;
background: #ccc;
z-index: 100;
}
#content {
padding-top: 150px;
width:400px;
background:green;
overflow:auto;
}
#sidebar {
width: 200px;
padding-top: 150px;
float:left;
background:red;
position:fixed;
margin-left:400px;
top:0;
height:100%;
}

    </style>
</head>
<body>
<div id="header">
    <div class="wrapper">
        header
    </div>
</div>
<div class="wrapper">
    <div id="content">
        content start<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content end
    </div>
    <div id="sidebar">
        sidebar
    </div>
</div>
</body>
</html>

Note that position:fixed does not work in ie6.

回复收藏 0 原文

~没有更多了~