Question

此网站结构存在一个小问题：www.bigideaadv.com/xsp

希望此容器填充顶部和底部导航之间的屏幕中间。我还希望通过使用滚动条调整窗口大小来实现中间崩溃。似乎无法使其正常工作。有人有什么想法吗？

    <div id="top_navigation">   
        <div id="navigation_inside">
            <ul id="navigation">
                <li><a href="">Schedule Demo</a></li>
                <li><a href="">Sales</a></li>
                <li><p style="float:left; margin:0;">Search</p>&nbsp;&nbsp;<form style="margin:0 0 0 5px; padding:0; float:left;"><input class="search" type="text" /><input type="hidden"></form></li>
            </ul>
            <ul id="navigation2">
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Products</a></li>
                <li><a href="">People</a></li>
                <li><a href="">News + Events</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </div>
    <div id="container">
        <div id="scroller">
        </div>
    </div>
    <div id="bottom_navigation">
        <div id="twitter_bar">
            <div id="twitter">
                <h5><img src="images/twitter_bird.png" width="23" height="16" />&nbsp;&nbsp;<b>@XSPGlobal:</b>&nbsp;</h5>
                <p>Loading...</p>
                <noscript><h5>This feature requires JavaScript</h5></noscript>
            </div>
        </div>
        <div id="blog_posts">
            <p>Here is where the blog posts will go.</p>
        </div>
        <div id="bottom_navigation_inside">
            <ul>
                <li><a href="">Partners</a></li>
                <li><a href="">Interfaces</a></li>
                <li><a href="">Careers</a></li>
                <li><a href="">XACT Blog</a></li>
                <li><a href="">Milestones</a></li>
                <li><a href="">Awards + Recognition</a></li>
                <li><a href="">Client Testimonials</a></li>
                <li><a href="">Press Releases</a></li>
                <li><a href="">Social Responsibility</a></li>
                <li><a href="">Privacy Policy</a></li>
                <li><a href="">Terms & Conditions</a></li>
            </ul>
        </div>
        <div id="social_links">
            <a href="http://www.facebook.com"><img src="images/facebook.png" width="23" height="24" /></a>
            <a href="http://www.twitter.com"><img src="images/twitter.png" width="23" height="24" /></a>
            <a href="http://www.linkedin.com"><img src="images/linkedin.png" width="23" height="24" /></a>
        </div>
    </div>

CSS：

    #container {
        margin: 72px 0 72px 0;
        width: 100%;
        height: 100%;
    }

    #top_navigation {
        position: fixed;
        min-width: 1010px;
        width: 100%;
        height: 72px;
        background: url('../images/opaque.png') repeat;
        text-transform: uppercase;
    }

    #bottom_navigation {
        position: absolute;
        min-width: 1010px;
        width: 100%;
        height: 172px;
        background: url('../images/opaque.png') repeat;
        text-transform: uppercase;
    }

Answer 1

将容器设置为固定的位置，顶部为72px，底部为172px。

HTML / CSS网页结构

1 个答案: