Question

好的，这是我的第一个问题，很可能会有很多问题。

我有一个div设置为页面的70％，但是当我将浏览器调整为较小的尺寸时，该div中的某些内容会低于页面底部。这很难解释。

滚动条也会低于页面底部。

这是我div的css代码

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

和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>
            <!-- 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

我希望你做得好！我自己复制了你的设置。有些事情做得不好。首先，隐藏内容有两个原因：

不透明度设置为0（不可见）
保证金：-150％（这些在评论中提到）

我做的是消除了这些CSS值，以便我能看到你的div。令我惊讶的是，缩放是重点。我认为你想说的是：

View on my browser

这是运行代码的Vivaldi（基于Chronium的浏览器）。

如何在浏览器调整大小时让DIV调整大小？

1 个答案: