Question

对于这一切有些新意，我不确定是否有可能做我想的事情，但是现在这样 - 现在，我的侧边菜单从页面顶部到底部。我想要发生的是它只出现在页眉和页脚之间，无论任何特定页面的大小。如果可能的话，我宁愿不使用JavaScript，因为我对HTML的了解要少于HTML / CSS。

我相信我有小提琴所需的一切。如果没有，请随时告诉我。

https://jsfiddle.net/BradAnderson/vcgqrh6y/1/

<body>

<header>
     <div id="header"></div>
</header>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>


<p>Click on the element below to open the menu</p>
<span style="font-size:30px;cursor:pointer" class="opencolor" onclick="openNav()">&#9776; Menu</span>



<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>

<script>
imageout=new Image();
imageout.src="Pics/image2.png";
imageover=new Image();
imageover.src="Pics/images2.png";

function image_out(){
document.images['imageout'].src="Pics/image2.png";
}

function image_over(){
document.images['imageout'].src="Pics/images2.png";
}
    </script>

<p>
<h3 class="indent">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 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 blah blah blah blah blah blah.  Blah blah blah blah blah blah blah blah.  </h3> 
<h3 class="indent">Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.  Yadda yadda yadda yadda.</h3></p>  

<footer>
     <div id="footer"></div>
</footer> 

body {
  background-color: #000;
}

hr { background-color: #7093DB; height: 4px; border: 0; }

body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #EAEAAE;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #2707AB;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #818181;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.opencolor
{
  color:White;
}

p.leftpadding {
    padding-left: 300px;
}

.indent {
    text-indent: 50px;
}

Answer 1

如果我了解您要实现的目标，请尝试使用.sidenav其他height和margin，例如：

.sidenav {
height: 80%;
margin: 50px 0px 0px 0px;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #EAEAAE;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;}

侧边菜单，不显示页面的顶部到底部，仅在页眉/页脚之间显示

1 个答案: