0
我的网站设计和布局存在很多问题。我已经修复了其中的大部分，但其中一个仍然存在：我的侧面导航栏不占用文本容器的整个高度（或超出大小）。我希望通过添加一个中间容器并将侧边导航设置为有一个高度：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 & 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é</a></li><br/> <li><a href='./goldrushgrill.php'>Goldrush Grill</a></li><br/><li><a href='./bullwheelbarandgrill.php'> Bullwheel Bar & 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 & 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é</a></li> <li><a href='./goldrushgrill.php'>Goldrush Grill</a></li><li><a href='./bullwheelbarandgrill.php'> Bullwheel Bar & 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 © 2016 Dimaond Peaks Resort, 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);
}
[/代码]
顺便说一句，我想知道如果我显示：表细胞;对于nav＃vert（或者它是#middle）和＃文本容器来尝试修复一个问题，而不会为＃文本容器填充（尽管它破坏了其他一些内容，但我认为我修复了这个问题通过做一些调整，至少，我想我修好了。无论如何，我想知道，如果我的显示器：表格单元格是导致混乱的原因或是其他东西？）
请将您的代码降低到显示问题所需的最低数量。通常这会神奇地向你揭示答案，并为你节省来到这里的麻烦。如果没有，它可以帮助我们更容易地发现问题，因为没有其他问题。此外，请格式化您的代码（缩进，没有多余的空间），以便我们可以阅读它。 –
我已经删除了一些不需要的东西。 – MongooseLover
嗯，会计算工作吗？ – MongooseLover