Question

我有一个网站布局，但我不能使顶部标题栏位置：修复而不会弄乱整个布局：一旦我改为固定侧边栏被推到页面顶部我不能让它与顶部对齐。

以下是HTML代码：

<html>
<head>
  <link rel="stylesheet" type="text/css"      href="http://fonts.googleapis.com/css?family=Arvo">
  <link rel="stylesheet" type="text/css" href="../css/main.css">
  <meta charset="UTF-8">
 <title>Test</title>
</head>
<body>
  <div id="wrapper">
    <div id="header">
    Home
</div>
<div id="sidebar">
  <ul>
    <li><a href="../html/test.html">Test</a></li>
    <li><a href="../html/test.html">Test</a></li>
    <li><a href="../html/test.html">Test</a></li>
  </ul>
  </div>
<div id="content">
  Test
</div>

这是CSS：

html,
body {
  height: 100%;
}

* {
 margin: 0;
padding: 0;
}

div#wrapper {
height: 100%;
overflow: hidden;
}

div#header {
  top: 0;
height: 56px;
text-align: center;
font-family: 'Arvo', serif;
color: white;
font-size: 48px;
width: 100%;
background-color: rgba(0, 79, 113, 1);
}

div#sidebar {
 width: 178px;
float: left;
min-height: 100%;
padding: 20px 20px 0px 0px;
text-align: right;
font-family: 'Arvo', serif;
color: white;
height: 100%;
width: 6%;
background-color: rgba(100, 147, 167, 1);
}

div#content {
margin-left: 178px;
min-height: 100%;
padding:75px;
}

li {
font-family: 'Arvo', serif;
list-style-position: inside;
list-style-type: none;
line-height: 30px
}

a{
color:white;
text-decoration: none;
}

Answer 1

如果您的标题具有已知高度，那么您可以为它保留一些空间：

添加此内容并在

下面运行代码段

#header {
  position:fixed
}
#wrapper {
  padding-top:56px;
  box-sizing:border-box;
}

＆＃13;

html,
body {
  height: 100%;
}

* {
 margin: 0;
padding: 0;
}

div#wrapper {
height: 100%;
overflow: hidden;
}

div#header {
  top: 0;
height: 56px;
text-align: center;
font-family: 'Arvo', serif;
color: white;
font-size: 48px;
width: 100%;
background-color: rgba(0, 79, 113, 1);
}

div#sidebar {
 width: 178px;
float: left;
min-height: 100%;
padding: 20px 20px 0px 0px;
text-align: right;
font-family: 'Arvo', serif;
color: white;
height: 100%;
width: 6%;
background-color: rgba(100, 147, 167, 1);
}

div#content {
margin-left: 178px;
min-height: 100%;
padding:75px;
}

li {
font-family: 'Arvo', serif;
list-style-position: inside;
list-style-type: none;
line-height: 30px
}

a{
color:white;
text-decoration: none;
}
#header {
  position:fixed
}
#wrapper {
  padding-top:56px;
  box-sizing:border-box;
}

＆＃13;

<div id="wrapper">
    <div id="header">
    Home
</div>
<div id="sidebar">
  <ul>
    <li><a href="../html/test.html">Test</a></li>
    <li><a href="../html/test.html">Test</a></li>
    <li><a href="../html/test.html">Test</a></li>
  </ul>
  </div>
<div id="content">
  Test
</div>

＆＃13;

Answer 2

你几乎开发了所有东西！

你只需要添加：

margin-top:56px到div#content
position:fixed到div#sidebar以及margin-top:56px
position:fixed到div#header

为什么不添加这些简单的CSS规则？

html,
body {
  height: 100%;
}

* {
 margin: 0;
padding: 0;
}

div#wrapper {
height: 100%;
overflow: hidden;
}

div#header {
position:fixed;
  top: 0;
height: 56px;
text-align: center;
font-family: 'Arvo', serif;
color: white;
font-size: 48px;
width: 100%;
background-color: rgba(0, 79, 113, 1);
}

div#sidebar {
position:fixed;
 width: 178px;
float: left;
min-height: 100%;
padding: 20px 20px 0px 0px;
text-align: right;
font-family: 'Arvo', serif;
color: white;
height: 100%;
width: 6%;
background-color: rgba(100, 147, 167, 1);
margin-top:56px;
}

div#content {
margin-left: 178px;
min-height: 100%;
padding:75px;
margin-top:56px;
}

li {
font-family: 'Arvo', serif;
list-style-position: inside;
list-style-type: none;
line-height: 30px
}

a{
color:white;
text-decoration: none;
}

<html>
<head>
  <link rel="stylesheet" type="text/css"      href="http://fonts.googleapis.com/css?family=Arvo">
  <link rel="stylesheet" type="text/css" href="css.css">
  <meta charset="UTF-8">
 <title>Test</title>
</head>
<body>
  <div id="wrapper">
    <div id="header">
    Home
</div>
<div id="sidebar">
  <ul>
    <li><a href="../html/test.html">Test</a></li>
    <li><a href="../html/test.html">Test</a></li>
    <li><a href="../html/test.html">Test</a></li>
  </ul>
  </div>
<div id="content">
  Test<br>
  Test<br>
  Test<br>
  Test<br>
  Test<br>
  Test<br>
  Test<br>
  Test<br>
  Test<br>
  Test<br>
  Test<br>
  Test<br>
 </div>

修改标题而不编辑布局

2 个答案: