Question

我正在尝试设置侧栏
它不是滚动内容，因为我已修复它但如果我删除固定比内容位置变为向下
任何方式设置侧边栏而不修复它并将其与其他内容附加

home.html的

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="bootstrap/css/bootstrap-theme.css" type="text/css"     rel="stylesheet"/>
<link href="bootstrap/css/bootstrap.min.css" type="text/css"   rel="stylesheet"/>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<style>

</style>
</head>
<body class="container">
<div>
<h1 style="font-size:65px; text-align:center; height:100px;">Democracy And Destruction</h1>
</div>
<br />
<ul class="sidenav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">MyCity</a></li>
<li><a href="#about">About</a></li>
</ul>

<div class="content">
<h2>Rule Your Country</h2>
<p>Paragraph 1........blah blah blah blah blah blah blah blah blah blah </p>
<p>paragraph 2........blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
<p>Paragraph 3........blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p> 
<h4>Header 4.</h4>
<div>
<ul class="sidenav1">
<li><a class="active" href="#home">Start Playing Now</a></li>
</ul>
</div>
</div>
</body>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" language="javascript"></script>
<script src="bootstrap/js/npm.js" type="text/javascript" language="javascript"></script>
</html>

style.css文件

@charset "utf-8";

body {margin：0;}

ul.sidenav1 {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #f1f1f1;
overflow: auto;
}
ul.sidenav1 li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
ul.sidenav1 li a.active {
background-color: #4CAF50;
color: white;
}
ul.sidenav1 li a:hover:not(.active) {
background-color: #555;
color: white;
}
ul.sidenav {
list-style-type: none;
padding: 0;
width: 15%;
background-color: #f1f1f1;
position: fixed;
overflow: auto;
}

ul.sidenav li a {
display: block;
color: #000;
padding: 8px 0 8px 20px;
text-decoration: none;
}

ul.sidenav li a.active {
background-color: #4CAF50;
color: white;
}

ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: white;
}

div.content {
margin-left: 18%;
margin-top:-24px;
padding-top:px;
height: 1200px;
}

@media screen and (max-width: 600px){
ul.sidenav {
    width:100%;
    height:auto;
    position:relative;
     text-align: center;
}

div.content {margin-left:0;}
}

@media screen and (max-width: 400px){
ul.sidenav li a {
    text-align: center;
    float: none;
}
}/* CSS Document */

Answer 1

您可能想尝试在页面上为侧边栏设置空格，就像div一样。

Cleaning up...
Command python setup.py egg_info failed with error code 1 in /tmp/pip-build-azNxLO/plotly
Storing debug log for failure in /home/tyahmed/.pip/pip.log

然后就像：

<body>
    <div class="sidebar">
        <ul>...</ul>
    </div>
    <div class="content">
        ...
    </div>
</body>

这不是最佳方式。只是一个简单布局的解决方案。但你应该真正使用的是一个像Bootstrap或Foundation这样的框架来启动并简化这些简单的布局。

Answer 2

因为你正在使用bootstrap ..这应该可以正常工作

 <div class="row">

  <div class="col-sm-3">
   <ul class="nav nav-pills nav-stacked">
   <li><a class="active" href="#home">Home</a></li>
   <li><a href="#news">News</a></li>
   <li><a href="#contact">MyCity</a></li>
   <li><a href="#about">About</a></li>
  </ul>
 </div>
 <div class="col-sm-9">
   /* body of your webpage */
 </div>
</div>

为什么不设置？

2 个答案: