Question

我正在尝试使用导航栏进行布局，该导航栏跨越除页脚之外的所有页面。我也有顶级和右侧的广告位。

我尝试关注https://stackoverflow.com/a/4401359/3255963以使导航栏停止运行，但它不会一直显示到页脚并且页脚丢失。

如何在底部显示我的页脚并让导航栏对页脚进行操作？

HTML 页面标题

<div id="wrap">

    <div id="navbar">
        <a id="navbarTitle" href="./index.html">Name of website</a><br>
    </div>

    <div id="main">

        <div id="topAdvertising"> 
            [placeholder]
        </div>

        <div id="main_core">
            <div id="main_core_left">       
                <div id="warning">
                This is a work in progress
                </div>

                <div id= "app_title">Page Title</div>

                <div id="app_input">
                    afjdlajfdaslkfjsalkfjasl;fjas;ldjfals;djflasdjfasldjflsajdfljlksadf: <br>                   
                    <li>dfjsalfjdlskjfdljfl</li>
                    <li>dsfjlakfjdljsflkjlj</li>
                    <li>skdfjlsjfldjfldjflf</li>
                    <li>dfjdlksjfldjflkjlfkdj</li>
                    jsljaflkdsjfldskjfldksjflkdjflkdjfldkjfdkljfld.<br>
                    fdljasflkjdaslfkjdslakfjds <br>
                    djfklajfldasjflds<br>
                    dfaskljfdalsjfdsla<br>
                    afdjklajfdlkjafld<br>
                    afdlkjlsdfjlakdfjlas<br>
                    afsdjljsfdlkjadflkjasfldkjaflkdjsafldaffasjdklfja<br>
                </div>

                <div id="text">
                <a id="linkid" href="http://randomweblinkjflksjflkdsjflkdjfldkjfldkjfldkfjdlfjdljfdlfjdklfj">Link</a> <br>
                <blockquote cite="linkjflskjfkldsjaflkdsjaflkdjsaflkjdsaflkjdslfkjdslakfjdslafjdslkafjdlskjfd"></blockquote>A lot of text. A lot of text.A lot of text.A lot of text. A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.A lot of text. A lot of text.A lot of text.A lot of text.</blockquote>              
                </div>

            </div>

            <div id="main_core_right_advertising">
                    [placeholder]
            </div>
        </div>


    </div>

</div>

<div id="footer">
    ©2014 Copyright
</div>

</html>

CSS

/* This is a comment, by the way */

body, html {
    color: black;
    background-color: white;
    margin: 0;
    padding: 0;
}

wrap {
    height: 100%;
    position: relative;
}

#navbar {
    position: absolute;
    height: 100%;
    width: 17%;
    top: 0px;
    left: 0px;
    bottom: 0px;
    color: white;
    background-color: black;
    padding: 12px;
}

    #navbarTitle {
        font-size: 2em;
        color: white;
        font-style: bold;
        text-align: left;
    }

#main {
    margin: 0px 0px 0px 20%;
    position: relative;
    height: 100%
}

    #topAdvertising {
        width: 80%;
        text-align: center;
        margin: 30px;
    }

    #main_core {
        position: absolute;
        height: 100%;
    }

        #main_core_left {
        float: left;
        width: 80%;
        }

            #warning {
                font-size: 14px;
                font-family: garamond, arial, helvetica, sans-serif;
                text-align: center;
                font-style: italic;
                margin: auto;
                margin-bottom: 20px;
                width: 70%;
                padding: 10px;
                background-color: yellow;
            }

            #app_title {
                font-size: 1.5em;
                margin: 0;
                margin-bottom: 7px;
                padding: 4px;
                text-align: center;
                letter-spacing: 0.05em;
            }

            #app_results_title {
                margin: 0;
                margin-bottom: 7px;
                font-weight: bold;
                text-align: center;
            }

            #app_input, #app_output {
                font-size: 16px;
                margin: auto;
                width: 70%;
                padding: 12px;
            }

            li {
                margin-left: 15px;
            }

            form {
                padding-top: 12px;
                text-align: center;
            }

            #resultsTable {
            width: 100%;
            border-collapse: collapse;
            }

            #resultsTable td, #resultsTable th {
            font-size:1em;
            border: 1px solid black;
            padding: 3px 7px 2px 7px;
            }

            #resultsTable th {
            font-size:1.1em;
            text-align:left;
            padding-top:5px;
            padding-bottom:4px;
            background-color:black;
            color:#ffffff;
            }

            #resultsTable tr.alt td 
            {
            color:#000000;
            background-color:gray;
            }

            #startOver {
                margin: 20px;
                font-size: 16px;
                text-align: center;
            }

            #authority {
                margin: 20px;
                padding: 10px;
                font-size: 12px;
                text-align: justify;            
            }

        #main_core_right_advertising {
            float: right;
            width: 17%;
            background-color: aqua;
            }

    #footer {
        text-align: center;
        margin: 20px;
        color: red;
    }

    a:link {
    text-decoration: none;
    }

Answer 1

我建议您查看不同的2列布局。 Bootstrap始终是一个很好的起点。至少看看他们是如何做出布局的。 CSS比看起来要复杂得多。

当你使用绝对值时，它会使物品不在流动状态，这意味着绝对物品周围的元素不会考虑物品尺寸。你用main-core做到了这一点，所以页脚认为流程中的位置是在顶级广告之后。您没有看到它，因为如果您想要在绝对项目上显示某些内容，则需要将其置于相对位置并为其指定z-index。

你遇到的另一个问题是浮动。对于包含float的元素计算其高度，需要设置溢出，clearfixed或者它本身需要一个float。

修改：修复了一些问题

http://jsfiddle.net/pfYt5/10/

/* added clear fix */
/* removed absolute on main core */

Answer 2

您的页脚不可见。我现在太累了，无法为此工作，但经过一些修修补补，我已经让它以红色文字显示（它实际上在页面顶部附近）：

enter image description here

jsfiddle.net/pfYt5/6 /

Answer 3

尝试放入页脚

clear:both;

HTML CSS：为什么我的页脚不可见？

3 个答案: