Question

我在试图让我的内容主体在我的页脚之前在屏幕底部结束时感到茫然。我错过了什么？

<body class="v4master">
    <form id="aspnetForm">
        <div id="SharingBoundaryHeader">Banner</div>
        <div id="s4-ribbonrow">Ribbon</div>
        <div id="s4-titlerow">Title Row</div>
        <div id="s4-workspace">WorkSpace
            </p></br>Aenean ex diam, tincidunt eu risus sit amet, condimentum cursus nunc. Nulla viverra ligula quis leo porttitor mattis. Proin at nibh sed nibh consectetur iaculis. Donec accumsan finibus ipsum. Cras aliquet velit condimentum urna fringilla molestie. Vivamus vitae ultrices tellus. Curabitur ac mi sit amet nisl posuere sollicitudin. Vestibulum sodales purus ac accumsan vulputate. Donec semper orci ac lorem volutpat euismod. Donec faucibus massa finibus erat commodo pharetra. Integer facilisis pretium pharetra. Curabitur auctor viverra sodales.
        </div>
        <div id="ctl00_IdLMFooter_footer">Footer</div>
    </form>
</body>

jsFiddle

编辑：我希望它看起来像this:但内部滚动条在内容溢出而不是外部滚动时处于活动状态。

Answer 1

页脚需要position: relative

http://jsfiddle.net/23n76huL/4/

我最初声明您在表单上需要position: absolute，但这不是必需的。

#ctl00_IdLMFooter_footer {
    position:relative;
    bottom:0;
}

Answer 2

在CSS中尝试这一点，看看你是否得到了你想要的东西。

#s4-workspace {
position: absolute;
bottom:20px;
}

#ctl00_IdLMFooter_footer {
position:absolute;
bottom:0;
}

Answer 3

可能有点矫枉过正，但这是一个使用javascript的动态版本：http://jsfiddle.net/23n76huL/7/

var height1 = document.getElementById('SharingBoundaryHeader').offsetHeight,
    height2 = document.getElementById('s4-ribbonrow').offsetHeight,
    height3 = document.getElementById('s4-titlerow').offsetHeight,
    //height4 = document.getElementById('s4-workspace').offsetHeight,
    height5 = document.getElementById('ctl00_IdLMFooter_footer').offsetHeight,
    bodyheight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
    a = 0;

a = bodyheight - (height1 + height2 + height3 + height5 + 2);

document.getElementById('s4-workspace').style.height = a + "px";

Answer 4

试试这个http://jsfiddle.net/23n76huL/9/

CSS

div {
    border: 1px solid black;
}
#ctl00_IdLMFooter_footer {
   background: white;
    bottom: 0;
    position: fixed;
    width: 100%;
}
#s4-workspace {
    position:relative;
    overflow-y:scroll;
}
body {
    height:auto;
    min-height:100%;
    height:100%;
}

.content {
    height: 100vh;
    border: none;
}

HTML

<body class="v4master">
    <form id="aspnetForm">
        <div id="SharingBoundaryHeader">Banner</div>
        <div id="s4-ribbonrow">Ribbon</div>
        <div id="s4-titlerow">Title Row</div>
        <div id="s4-workspace">
            <div class="content">
                WorkSpace
            </p></br>Aenean ex diam, tincidunt eu risus sit amet, condimentum cursus nunc. Nulla viverra ligula quis leo porttitor mattis. Proin at nibh sed nibh consectetur iaculis. Donec accumsan finibus ipsum. Cras aliquet velit condimentum urna fringilla molestie. Vivamus vitae ultrices tellus. Curabitur ac mi sit amet nisl posuere sollicitudin. Vestibulum sodales purus ac accumsan vulputate. Donec semper orci ac lorem volutpat euismod. Donec faucibus massa finibus erat commodo pharetra. Integer facilisis pretium pharetra. Curabitur auctor viverra sodales.

            Integer cursus ornare lobortis. Ut felis tellus, tincidunt vitae finibus lobortis, mollis aliquet tortor. In molestie lacus justo, eget viverra ante viverra id. Fusce vehicula nibh quis molestie lacinia. Aenean ultricies lorem eros, vehicula commodo lectus feugiat tempus. Suspendisse potenti. Aenean sit amet felis tincidunt, efficitur sem sed, bibendum erat. Fusce a tellus in nisl tempor hendrerit at non ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec lorem ligula, pharetra ut mi vel, pharetra auctor felis. Fusce erat orci, sodales at dapibus vitae, viverra non lorem. Curabitur tincidunt mi imperdiet est mattis ultricies.

            Integer magna lorem, aliquam a lobortis et, pulvinar et eros. Nullam consectetur semper dui, condimentum venenatis mi ultricies non. Suspendisse non maximus felis. Praesent cursus est a sollicitudin commodo. Sed enim risus, varius id sagittis sed, tempor et orci. Nulla vestibulum nulla id arcu tincidunt sagittis. Nunc eu est quis massa iaculis laoreet et ut odio. Praesent feugiat felis a neque pulvinar ultrices. Donec eget leo dui. Nulla in eros sit amet quam iaculis euismod eget ut augue. Ut vitae hendrerit velit. Quisque massa sem, vulputate id nunc ut, lacinia cursus turpis. Proin lobortis, enim sed varius sollicitudin, urna dolor mollis mauris, et sodales tortor metus non sapien. Quisque eget mauris vitae mi dapibus tincidunt. Praesent eget posuere odio, ac dictum diam.

            Sed rutrum libero vel dui volutpat egestas. Nullam ultricies dignissim nunc non tristique. Aliquam erat volutpat. Curabitur vel enim eget tortor dictum rutrum. Aliquam a lacus id diam luctus faucibus eu eget neque. Nullam ut lacus lacinia, pellentesque ipsum sit amet, consectetur sem. Proin tristique eleifend nisi vitae sollicitudin. Aliquam accumsan orci eget libero sollicitudin, vitae tempus diam blandit. Vestibulum quam dui, viverra vel commodo id, dapibus at erat.

            Etiam interdum varius pellentesque. Suspendisse potenti. Nulla venenatis posuere elementum. Suspendisse potenti. Pellentesque varius accumsan enim. Donec molestie urna at arcu posuere egestas. Praesent mattis nisi ut erat euismod, a venenatis velit viverra. Vestibulum ultricies tempus eleifend. Nulla vitae dui suscipit, hendrerit tortor quis, viverra urna. Pellentesque et varius turpis. Morbi in risus vel elit euismod pharetra. Cras ut mi in ligula venenatis vulputate non in nibh. Sed quis sapien eget sapien blandit viverra. Donec sed magna eget lacus sodales consectetur. 
        </div>
    </div>
    <div id="ctl00_IdLMFooter_footer">Footer</div>
</form>
</body>

防止重叠Div

4 个答案: