Question

我的网站设计和布局存在很多问题。我现在已经解决了大部分问题，但仍有一个主要问题：我的导航器没有占据文本容器的整个高度（或者超出了大小）。我曾希望通过添加一个中间容器并设置侧导航以达到一个高度：100％可以做到这一点，但事实并非如此。

[代码]

<html>
<head>
<title>Home  </title>
<link rel="stylesheet" type="text/css" href="./main.css">
<link rel="icon" href="./ski_icon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="jquery-3.0.0.min.js" type="text/javascript"></script>
</head>
<body> 
<div id='content'><div id='logo'><img src='./logo.png'></img></div><div id='container'><nav id='hor'><ul><li><a href='./index.php'> Home </a> </li><li><a href='./mountains.php'> The Mountains </a></li><li><a href='./resorts.php'> The Resorts </a></li><li><a href='./snowreports.php'> Snow Reports </a></li><li class='dropdown' id='Events'><a href='javascript:void(0)' class='dropbtn' id='events2' onclick='showEAndADropdownHor()'> Events &amp Activities <i class='fa fa-angle-down'></i></a><div class='dropdown-content' id='eAndADropdown'><ul><li><a href='./eventsandactivities.php'> Main </a></li><br/><li> <a href='./foggyGoggle.php'> Foggy Goggle </a></li><br/><li><a href='./lessons.php'>  Ski Lessons </a></li></ul></div>


</li><li><a href='./plantrip.php'> Plan A Trip </a></li><li><a href='./contactus.php'> Contact Us </a></li><li><a href='./findus.php'> Find Us </a></li><li class='dropdown' id='Restaurants'> <a href='javascript:void(0)' class='dropbtn' onclick='showRestaurantDropdownHor()'> Restaurants <i class='fa fa-angle-down'></i></a><div class='dropdown-content' id='restaurantDropdown' style='z-index: 1;'><ul style><li><a href='./grandviewbistro.php'>Grand View Bistro</a></li><br/><li><a href='./angelescrestcafe.php'>Angeles Crest Caf&eacute</a></li><br/> <li><a href='./goldrushgrill.php'>Goldrush Grill</a></li><br/><li><a href='./bullwheelbarandgrill.php'>  Bullwheel Bar &amp  Grill </a></li><br/><li><a href='./bigpinesbarbecue.php'> Big Pines Barbecue </a></li><br/><li><a href='./northpolegrill.php'> North Pole Grill </a></li></ul></div>

</li></ul></nav><div id='middleContainer'><div id='middle'><nav id='vert'><ul><li><a href='./index.php'> Home </a></li><li><a href='./mountains.php'> The Mountains </a></li><tr><td><li><a href='./resorts.php'> The Resorts </a></li></td></tr><li><a href='./snowreports.php'> Snow Reports </a></li><li class='dropdown'  id='ead2'><a href='javascript:void(0)' class='dropbtn' onclick='showEAndADropdownVert()'> Events &amp Activities <i class='fa fa-angle-right'></i> </a><div class='dropdown-content' id='eAndADropdown2'><ul id='sb'><li><a href='./eventsandactivities.php'> Main </a></li><li> <a href='./foggyGoggle.php'> Foggy Goggle </a></li><li><a href='./lessons.php'>  Ski Lessons </a></li></ul></div></li>
<script>

function changePage()
{





window.location.href= "./findus.php";

}

</script>

<li><a href='./plantrip.php'> Plan A Trip </a></li><li><a href='./contactus.php'> Contact Us </a></li><li onclick='changePage()'><a href='./findus.php'> Find Us</a></li><li class='dropdown'> <a href='javascript:void(0)' class='dropbtn' onclick='showRestaurantDropdownVert()'> Restaurants <i class='fa fa-angle-right'></i></a><div class='dropdown-content' id='restaurantDropdown2'><ul><li><a href='./grandviewbistro.php'>Grand View Bistro</a></li><li><a href='./angelescrestcafe.php'>Angeles Crest Caf&eacute</a></li> <li><a href='./goldrushgrill.php'>Goldrush Grill</a></li><li><a href='./bullwheelbarandgrill.php'>  Bullwheel Bar &amp  Grill </a></li><li><a href='./bigpinesbarbecue.php'> Big Pines Barbecue </a></li><li><a href='./northpolegrill.php'> North Pole Grill </a></li></ul></div></li></ul></nav>

<style>

img
{
width: 250;
height: 250;
border: 1px solid black;

}

</style>

</div>



 <div id="text-container">

<h1> Home</h1>

<p> Looking for an exciting day of fun?   Then you've come to the right place!   Diamond Peaks Resort is rated #1 by the All-American Skiing Association.   
With three different resorts, there is enough variety to please everyone.   </p>

<img src="./image2.jpg"></img><img src="./image5.jpg"></img><img src="./image3.jpg"></img><br/>
<img src="./image6.jpg"></img><img src="./image7.jpg"></img><img src="./image12.jpg"></img><br/>


  </div>
</div>
</div>


<div id='footercontainer' style='height: 90px;'><footer style='height: 90px;'>
<style>

a.twitter-share-button 
{
color:  white;

}

footer table.right td
{
background-color: rgb(223,223,223);

}

footer table.left td
{
font-family: "Impact", Times, serif;
font-size: 14px;
color: white;


}


footer  table.left td a
{
color: white;
font-family: "Impact", Times, serif;
font-size: 14px;

}

</style>
<div style='float: left;'>1234 Easy Street San Gabriel, CA <br/>Copyright  &copy;  2016   Dimaond Peaks Resort, &nbsp; All Rights Reserved. <br/><a href='http://www.allwebpromotion.com/' target='_blank'>Website Design</a> by: All Web Promotion</div><div style='float:right; color: black;'><a href='https://twitter.com/share' class='twitter-share-button' data-text='Come to Diamond Peaks Resort and enjoy the fun!' data-size='large'>Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>







</div>
<br/>
</div>
</footer></div></div>

</body>
</html>

[/代码]

[代码]

#logo
{

border: 1px dashed purple;
width: 1050;
height: 75;

}

#logo > img
{
width: 1050;
height: 75;

}

footer a
{

color: white;


}

.floatleft
{
float: left;

}


.floatright
{
float: right;

}

#content
{

// border-left: 3px solid #283379;
  border-right: 3px solid #283379;
  text-align: left;
  margin: 0 auto;


max-width: 960px;
  background-color: #ffffff;
  background-repeat: repeat-y;
  height: auto;





}



nav#hor ul li ul
{
overflow-y: auto;



}

nav
{


      border: 10px solid transparent;
padding: 15px;
  border-image-source: url(./blue-diamond.gif);  
  border-image-repeat:repeat;
   border-image-slice: 30;

background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 110%;

}

nav#vert
{

 width: auto;

  height: 100%;  

  margin: 0px;
 //display:table-cell;
 // float: left;
font-size: 100%;

}

nav#hor ul li ul li
{

width: 100%;

}

.dropdown ul li
{
width: 100%;

}


.dropdown-content ul li
{
width: 100%;


}






body { 
  color: #000000;
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: #422520;
  background-image: url(./snow_mountain.jpg);
   background-repeat:no-repeat;

   background-size:cover;
  text-align: center;
  background-attachment: fixed;
  background-position: center;
}

#footerContainer
{

 //border-left: 3px solid #283379;
  border-right: 3px solid #283379;
  text-align: left;
  margin: 0 auto;
  width: 980px;
  background-color: #ffffff;
  background-repeat: repeat-y;
height: 150px;


}

footer
{

    border: 10px solid transparent;
padding: 15px;


  text-align: left;
  margin: 0 auto;
  width: 1000px;

  background-repeat: repeat-y;

  border-image-source: url(./blue-diamond.gif);  
  border-image-repeat:repeat;
   border-image-slice: 30;

background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 14px;
color: white;


}

footer table.left td
{
font-family: "Impact", Times, serif;
font-size: 14px;
color: white;


}


footer  table.left td a
{
color: white;
font-family: "Impact", Times, serif;
font-size: 14px;

}

#container
{
 // border-left: 3px solid #283379;
  border-right: 3px solid #283379;
  text-align: left;
  margin: 0 auto;
  width: 1050px;
  background-color: #ffffff;
  background-repeat: repeat-y;
  height: auto;
 // max-width: 960px;




}


nav > a
{

color: #ccccff;

}

nav#hor > div
{

border: 1px solid white;
float: left;
padding: 10px;
background-color: #000044;
}

nav#hor
{
max-width: 1000px;
//width: auto;
height: 50px;
margin: 0;
font-size: 100%;
//width: 960px;

}


nav#hor a
{

//color: rgb(0 0,238);
color: white;
}


nav#hor > div >  a
{

color:  #ccccff;
text-decoration: none;
font-size: 100%;
}



nav#hor>div:hover
{

background-color: #018802;

}

h1
{
font-family: "MV Boli", Times, Serif;

font-style: bold;
text-align: center;
font-size: 36px;

}

h2
{

font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}

h3
{

font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 20px;
}




#text-container
{



height: 100%;
width: auto;

border: 2px solid cyan;




  */ zoom: 1;
  */ margin: 0;
  display: table-cell;


 padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;




}


nav#hor li
{

width: auto;


}

#text-container:after
{
clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility:hidden;

}

#text-container  p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}

.left img
{

float: left; 
padding: 0 20px 20px 0;

}






.left > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}


.right img
{
float: right;
    margin: 0px 0px 15px 20px;
  border: 1px solid transparent;

}



.right  p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}


nav#hor ul
{
list-style-type: none;
    margin: 0;
    padding: 0;
 background-color: #000044;
   z-index: 1;

    width: auto;
    overflow: hidden;






}

nav#hor ul li:hover
{
  background-color: #018802;

}







nav#vert ul
{
list-style-type: none;
    margin: 0;
    padding: 0;
   // overflow: auto;
    background-color: #000044;
      height: auto;



}

nav#vert  li a
{
display: block;

}
nav#hor ul li
{
float: left;
border: 1px solid white;
z-index: 1;
width: auto;


}

nav#vert ul li
{
//float: left;
border: 1px solid white;.
z-index: 1;
position: relative;


}

nav#vert a
{
color: white;

}

#middle
{
height: 100%;
float: left;

width: auto;

 display: table-cell;

}




nav#vert ul li ul
{
//left: 100%;

//left: 25;
//right:: 150;
//left: 215px;
//right: 20%;

 //top: 100%;
//  left: 0;
  //right: 100%;
  //right: -50px;
  //bottom: 100%;
  //top: 0;
  //float: right;
   //right: -100px;

top: -36px;
left: 90%;



position: absolute;
//height: 164px;
height: auto;


}




nav#vert  li a, .dropbtn {
    display: inline-block;
  //  color: white;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
}


 nav#hor  li a, .dropbtn {
    display: inline-block;
  //  color: white;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
}

nav#vert li:hover
{
 background-color: #018802;

}

nav#hor   li a:hover, .dropdown:hover .dropbtn {
 background-color: #018802;

}

nav#vert   li a:hover, .dropdown:hover .dropbtn {
  background-color: #018802;
}


 li.dropdown {
    display: inline-block;
}



.dropdown-content ul
{

z-index: 1000;


}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      color: rgb(0, 0, 238);
     z-index: 1000;



}

.dropdown-content-side
{


}

#eAndADropdown
{

}

#eAndADropdown2
{

}


#eAndADropdown ul li
{
background-color: #000044;
border: 1px solid white;

}

#restaurantDropdown ul li
{
background-color: #000044;
border: 1px solid white;

}

#restaurantDropdown  ul
{
border: 1px solid white;

}

#eAndADropdown ul
{
border: 1px solid white;

}


#eAndADropdown:hover
{
  background-color: #018802;

}

#restaurantDropdown:hover
{
  background-color: #018802;

}

#eAndADropdown a
{
    color: rgb(0, 0, 238);

}

#restaurantDropdown a
{
    color: rgb(0, 0, 238);

}

.dropdown-content a {
    color: rgb(0, 0, 238);
     border: 1 px solid white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}



.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

li  a
{

color: rgb(0, 0, 238);

}

[/代码]

顺便说一句，我想知道我的显示器是否是：table-cell;对于nav＃vert（或者它是#middle）和#text-container来尝试修复一个问题，这个问题没有为#text-container留下任何填充（虽然它打破了其他一些东西，但我想我修复了通过做一些调整，至少，我想我已经修好了。无论如何，我想知道我的显示器：表格单元格是导航条搞砸的原因还是别的什么？“

Answer 1

你的目标是什么？在侧栏上实现蓝色？如果是这样.. 添加到 middleContainer 背景：＃21f; 和文本容器背景：#fff;

更新：您尚未声明 middleContainer 元素。将元素添加到css可能会解决您的问题。

#middleContainer {
     height: 100%;
}

Answer 2

删除#middle元素已解决此问题。

侧导航栏未填满全高

2 个答案: