Greetings! Here's my initial query, with more to follow.
I've encountered an issue where a div on my page is set to 70% of the screen, but upon resizing the browser to a smaller size, some content within the div extends past the bottom of the page. It's quite difficult to articulate.
The scrollbar also extends below the page.
Sharing the CSS for the troublesome div below:
#header {
position: fixed;
width:100%;
height:100%;
z-index: 90;
overflow:auto;
}
#navigation {
margin-top:20px;
display:block;
list-style:none;
z-index:3;
margin-bottom:10px;
}
#navigation a{
margin-top:0;
color: #444;
display: block;
background: #fff;
background: rgba(255,255,255,0.9);
line-height: 50px;
padding: 0px 10px;
text-transform: uppercase;
margin-bottom: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
font-family: 'Cinzel', serif;
font-weight:600;
font-size: 19px;
text-align:center;
}
.panel{
overflow:auto;
right: 40px;
left: 40px;
height:70%;
position: fixed;
margin-top: -150%;
margin-bottom:auto;
background-color: #008aff;
opacity: 0;
z-index:2;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
-ms-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
Here's a glimpse at the corresponding HTML:
<div id="header>
<div id="navigation">
<table align="center">
<tr>
<th width="300px" align="center">
<img src="logo.png" height="165px">
</th>
<th width="140px" align="center"><a id="link-home" href="#home">Home</a></th>
<th width="140px" align="center"><a id="link-portfolio" href="#portfolio">Portfolio</a></th>
<th width="140px" align="center"><a id="link-services" href="#services">Services</a></th>
<th width="140px" align="center"><a id="link-about" href="#about">About</a></th>
<th width="140px" align="center"><a id="link-contact" href="#contact">Contact</a></th>
</tr>
</table>
</div>
<div class="main">
<div id="home" class="panel">
<h2>Home</h2>
<p></p>
</div>
<div id="portfolio" class="panel">
<h2>Portfolio</h2>
<p>What I’ve Done</p>
</div>
<div id="services" class="panel">
<h2>Services</h2>
<p>
- Line 1<br>
- Line 2<br>
- Line 3<br>
- Line 4<br>
- Line 5<br>
- Line 6<br>
- Line 7<br>
- Line 8<br>
- Line 9<br>
- Line 10<br>
- Line 11<br>
- Line 12<br>
- Line 13<br>
- Line 14<br>
- Line 15<br>
- Line 16<br>
- Line 17<br>
- Line 18<br>
- Line 19<br>
- Line 20<br>
</p>
</div>
<div id="about" class="panel">
<h2>About Brem Media</h2>
<p>
Been in the Game a while!
</p>
</div>
<div id="contact" class="panel">
<h2>Contact</h2>
<p>
Phone: 519.991.3671<br>
E-Mail: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c8cfc7cee1c3d3c4ccccc4c5c8c08fc2cecc">[email protected]</a>
</p>
</div>
</div>
</div>