Tarayıcı yeniden boyutlandırıldığında yeniden boyutlandırmak için DIV'yi nasıl alabilirim?

Question

Pekala, bu benim ilk sorum, muhtemelen gelecek birçok kişi.

Sayfanın% 70'i olacak şekilde ayarlanmış bir div var, ancak tarayıcımı daha küçük bir boyuta getirdiğimde, bu div içindeki bazı içerikler sayfanın altına gider. Açıklaması zor.

Kaydırma çubuğu, sayfanın altına da gider.

Bu bunun için benim css kod

#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; 

div ve html dosyası

<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> 
      <!-- main content --> 
      <div class="main"> 

        <!-- Home --> 
       <div id="home" class="panel"> 
         <h2>Home</h2> 
         <p></p> 
       </div> 
       <!-- /Home --> 

       <!-- Portfolio --> 
       <div id="portfolio" class="panel"> 
         <h2>Portfolio</h2> 
         <p>What I&rsquo;ve Done</p> 
       </div> 
       <!-- /Portfolio --> 

       <!-- Services --> 
       <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> 
       <!-- /services --> 


       <!-- About --> 
       <div id="about" class="panel"> 
         <h2>About Brem Media</h2> 
         <p> 
          Been in the Game a while! 
         </p> 
       </div> 
       <!-- /about --> 


       <!-- Contact --> 
       <div id="contact" class="panel"> 
         <h2>Contact</h2> 
         <p> 
          Phone: 519.991.3671<br> 
          E-Mail: info@bremmedia.com 
         </p> 
       </div> 
       <!-- /Contact --> 



      </div> 
      <!-- ip-main --> 



     </div> 
     <!-- header --> 

Answer 1

Ben iyi yapıyorsun umut var! Kurulumunu kendi başıma kopyaladım. İyi çalışmayan birkaç şey var. Her şeyden önce, içeriği iki nedenden dolayı gizlidir: (bu yorumlarda bahsedildi) -150% :

1. Opaklık 0 (görünmez)
2. Marjı üstü olarak ayarlandığında

   Yaptığım şey, bu CSS değerlerini elimden aldım, böylece seni görebildim. Sürprizime göre ölçeklendirme noktasında. Ne demeye çalışıyorsun düşünüyorum şudur:

   View on my browser

   Bu

   Vivaldi kodunuzu çalıştıran (Chronium tabanlı tarayıcı) 'dir.