0

出于某种原因，我似乎无法让我网站的博客页面上的包装器进入页面底部或将文本保存在其中而不超出它。

我创建了 2 个包装器，如其他地方所见，但在此页面上没有帮助。

这是HTML

<body>
    <div id="wrapperfull">
        <div id="wrapper">
            <div id="header"> <a href="index.html"><img src="../Images/Header.png" width="379" height="99" alt="Just Joel Header"></a>
            </div>
            <!-- <div id="uberbar"> -->
            <div class="navigation">
                <nav>
                    <ul>
                        <li><a href="index.html">HOME</a>
                        </li>
                        <li><a href="about.html">ABOUT</a>
                        </li>
                        <li><a href='#'><span>WORK</span></a>
                            <ul>
                                <li class="services1"> <a href="../../print.html">PRINT</a>
                                    <a href="../../branding.html">BRANDING</a>
                                    <a href="../../editorial.html">EDITORIAL</a>
                                    <a href="../../photography.html">PHOTOGRAPHY</a>
                                </li>
                            </ul>
                            <li><a href="blog.html">BLOG</a>
                            </li>
                            <li><a href="inspired.html">INSPIRED</a>
                            </li>
                            <li><a href="contact.html">CONTACT</a>
                            </li>
                    </ul>
                </nav>
            </div>
            <div class="blog-container">
                    <h1>BLOG</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue consectetur lacus, quis facilisis elit faucibus nec. Nam aliquam nisi elit, nec venenatis lorem feugiat id. Sed in feugiat enim, ac condimentum mi. Etiam ut elit vulputate, posuere velit vitae, aliquam lorem. Proin tempor massa enim, in sollicitudin diam suscipit sed. Phasellus ut consectetur ipsum, quis sagittis velit. In tincidunt consectetur magna vitae vehicula. Cras vitae adipiscing lorem. Maecenas fermentum sapien leo.</p>
                <p>Nulla urna nibh, pulvinar quis viverra sit amet, semper at mi. Fusce adipiscing purus odio, rhoncus viverra enim accumsan eget. Donec nisi augue, dapibus at facilisis in, facilisis et urna. Suspendisse ornare, libero id egestas lobortis, magna est rutrum erat, at viverra nisi turpis sit amet nulla. Nam quis elit at augue aliquam malesuada. Nulla mi purus, commodo eu massa ut, luctus adipiscing justo. Duis sagittis nisl et erat sollicitudin tempus. Vivamus hendrerit et diam ut dictum. Proin arcu nunc, imperdiet id elementum eu, adipiscing non erat. Nullam risus dui, interdum non feugiat sed, ultricies eget lectus.</p>
                <p>Duis tincidunt purus sit amet arcu ullamcorper, a consectetur dolor vehicula. Aliquam a velit metus. Donec molestie euismod mauris et ultrices. Phasellus pellentesque pharetra nibh tempor tempor. Fusce rhoncus nibh eget est eleifend varius. Ut scelerisque enim facilisis tellus vulputate tempor. Quisque id pellentesque eros, ac tristique odio. Curazitur tincidunt gravida sapien nec porttitor.</p>
                <p>Pellentesque id eros viverra, aliquam tortor vitae, semper sapien. Duis sagittis fermentum metus. Nunc nisi nulla, mollis ut lacus vitae, adipiscing mollis ligula. Nulla aliquet tempor metus at blandit. Sed suscipit pulvinar purus, vel venenatis diam. Vestibulum aliquam, dolor ac lobortis blandit, mi augue mollis nisl, ac euismod orci est et nulla. Morbi congue risus eu justo pellentesque, quis vestibulum lorem porttitor. Vestibulum facilisis ultrices ultrices. Nam gravida neque quis lacinia pretium. Donec sem turpis, dictum sed tellus eu, aliquet faucibus erat. Quisque elementum purus vitae tellus vestibulum, convallis consectetur tortor vulputate. Vestibulum sollicitudin enim nec hendrerit egestas. Vivamus elementum mollis erat, eget placerat ligula aliquam nec. Donec pharetra elementum ligula et bibendum. Mauris tristique commodo viverra.</p>
                <p>Sed in justo mi. Nam iaculis, urna vitae fringilla rutrum, urna libero eleifend nulla, id pretium tellus nulla sit amet dui. Donec non sagittis dui, non posuere mi. In hac habitasse platea dictumst. Vestibulum dui nulla, convallis ac dui ut, malesuada vulputate justo. Integer lacinia magna leo, eu lacinia est tempus eget. Cras ullamcorper mi non eros cursus, sed suscipit erat volutpat. Duis blandit, dolor vitae adipiscing tempor, massa massa consequat nibh, scelerisque volutpat risus massa vitae leo. Nullam id sem nibh. Aliquam porta nunc accumsan leo tristique pharetra. Morbi aliquet, ipsum sed accumsan ultricies, enim tellus venenatis tellus, sed tempus neque enim vitae tortor. Donec quis turpis ac elit facilisis viverra cursus eu felis. Suspendisse laoreet lacinia tortor, congue ullamcorper libero feugiat at. Integer fermentum in erat sed sollicitudin.</p>Pellentesque turpis nibh, egestas fermentum libero id, tincidunt hendrerit felis. In hac habitasse platea dictumst. Aliquam ac sem eget libero feugiat accumsan. Sed vel turpis eu elit adipiscing fermentum. Vivamus at velit hendrerit justo semper luctus. Etiam arcu erat, bibendum a nisl porta, adipiscing feugiat sem. Morbi tincidunt imperdiet sapien eu suscipit. Praesent sit am`enter code here`et hendrerit augue. Phasellus vel vulputate ante, hendrerit rhoncus dolor. Proin tempus eu tellus hendrerit vehicula. Donec elementum sed nibh non pellentesque. In lacinia, nisi consequat congue feugiat, diam mauris egestas lacus, ut tempor arcu mauris vehicula nisl. Nulla eu pulvinar odio. Mauris ac ligula luctus, ullamcorper nisl tempor, luctus risus. Praesent quis interdum velit. Proin in molestie nisl. Suspendisse ut elit imperdiet magna pellentesque facilisis eu ac dolor. Fusce sollicitudin vulputate urna eget ultrices. Quisque nisi nibh, lacinia et justo nec, gravida tincidunt nulla. Donec quis nulla at nisl congue sagittis. Aliquam sit amet mi vel justo blandit scelerisque sed quis dui. Praesent fringilla mollis nulla, sit amet aliquam dui euismod ac. Nunc non rutrum augue. Nulla vitae tincidunt lacus. Mauris turpis lacus, suscipit ac nisi eget, tristique malesuada metus. Sed nisi eros, accumsan ac eros ac, luctus mollis sem.</p>
            </div>
            <div id="footer">   <a href="http://twitter.com/JustJoel_"><img src=http://i1286.photobucket.com/albums/a604/JustJoel_/TwitterSocialMediaIcon_zps379a327e.png width="40" height="40" alt="Twitter"></a>
    <a href="http://www.linkedin.com/profile/view?id=119632044&amp;goback=.nmp_*1_*1_*1_*1_*1_*1_*1_*1_*1_*1&amp;trk=spm_pichttp://www.linkedin.com/profile/view?id=119632044&amp;goback=.nmp_*1_*1_*1_*1_*1_*1_*1_*1_*1_*1&amp;trk=spm_pic"><img src=http://i1286.photobucket.com/albums/a604/JustJoel_/LinkedinSocialMediaIcon_zps134a0ab5.png width="40" height="40" alt="Linkedin"></a>
    <a href="http://pinterest.com/justjoel80/boards/"><img src=http://i1286.photobucket.com/albums/a604/JustJoel_/PinterestSocialMediaIcon_zps9d3a3e93.png width="40" height="40" alt="Pinterest"></a>
    <a href="http://instagram.com/mole80"><img src=http://i1286.photobucket.com/albums/a604/JustJoel_/InstagramSocialMediaIcon_zpsdd09d3a4.png width="40" height="40" alt="Instagram"></a>
    <a href="https://plus.google.com/107489686537237947777/posts"><img src=http://i1286.photobucket.com/albums/a604/JustJoel_/GooglePlusSocialMediaIcon_zps9d93776b.png width="41" height="40" alt="Googleplus"></a>
            </div>
        </div>
    </div>
</body>

这是CSS

       #wrapperfull {
       height: 100%;
       width: 1050px;
       margin: auto;
       margin-bottom: 0px;
       padding: 30px;
       background-color: #FFF;
       }

       #wrapper {
       height: auto;
       position: absolute;
       width: 1050px;
       margin-left: -30px;
       margin-bottom: 0px;
       padding: 30px;
       background-color: #FFF;
       }

        .blog-container {
       height: 1000px;
       width: 1050px;
       margin-top: 37px;
       background-color:
       }

jsfiddle

任何帮助将不胜感激，因为这阻碍了我，谢谢

4

1 回答 1

0

跟进：试试这个重新设计的解决方案。如果只有少量内容，页面将填满浏览器窗口，如果内容较长，则展开。它还有一个粘性页脚，无论内容大小如何，它都将始终位于页面底部。

这是一个 JSFiddle，带有简化的代码：http: //jsfiddle.net/TalkingRock/FjCsq/

首先，在你的 CSS中将htmland设为 0，然后添加. bodyheight:100%;

html{
margin:0;
padding:0;
border:none;
height:100%;
}

body {
margin:0;
padding:0;
border:none;    
height:100%;
}

其次，您只需要一个包装器。从 html 和 css 中删除“包装器”div。由于您的页面部分已经整齐地包含在 div 中（页眉、导航、博客容器、页脚），您不需要它，并且在下面的步骤中使用 min-height:100% 会变得复杂。现在“wrapperfull”是您的主要容器 div。

第三，添加min-height:100%到wrapperfull. 还包括您的宽度，并将 div 居中。使用 min-height:100% 和在 html 和 body 上设置的高度，您的页面将扩展以适应较长的内容，如果内容很少，将填满浏览器窗口。高度 100% Div 文章：http ://www.dave-woods.co.uk/100-height-layout-using-css/comment-page-5/

您需要将内边距、边框和边距保持为 0。这可以防止 wrapperfull 变得大于其分配的大小（请记住，大小包括边距、内边距、边框以及内容。盒子模型：http://www .w3schools.com/css/css_boxmodel.asp

由于宽度是在 wrapperfull 中设置的，因此您不需要在其他 div 中设置“width: 1050px”。这将防止您的 div 溢出。在原始代码中，“宽度：1050px”的 div 在分配填充和边距后变得更大（再次是框模型）。

#wrapperfull {
min-height: 100%;
width: 1050px;
padding: 0;
border: none;
margin: 0px auto;
background-color: LightGray;
position: relative; /* for the absolute positioned footer */
}

第四，现在您可以设置标题、导航和博客容器的样式。页眉、导航和页脚都有背景。博客容器将使用 wrapperfull 背景，并且显得灵活。

#header {
padding: 10px;
background-color: PaleTurquoise;
}

.navigation {
padding:10px;
background-color: DarkGray;}

 /* the bottom padding needs to be taller than the footer, otherwise the text will slide behind the footer */
.blog-container {
padding: 20px 20px 80px 20px;
}

第五，现在是粘性页脚。分配它的位置：绝对，底部。页脚内容被包裹在另一个 div 中以进行样式设置，并防止溢出。你可能需要玩高度。如果太短，内容会溢出，将页面向下推，导致滚动条。

#footer {
position: absolute;
width: 1050px;
height: 65px;
bottom: 0;
padding: 0;
margin: 0;
background-color: DimGray;
}

.footer-style {
padding:10px;
}

粘性页脚： http: //matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

绝对位置和相对位置：http ://css-tricks.com/absolute-positioning-inside-relative-positioning/

Work 菜单项的结束 li 标记以及最后一段中的开始 p 标记丢失，因此请查看它是否在您的实际代码中丢失。

于 2013-10-29T07:41:48.930 回答