html - CSS布局，页脚在内容的中间-6ren

html - CSS布局，页脚在内容的中间

转载作者：太空宇宙更新时间：2023-11-04 11:16:46

我需要有人帮我解决这个问题。在我的 CSS 布局中，页脚位于内容的中间，而不是位于正下方。我的代码可以在这里看到。请帮助我，不知道出了什么问题，在这上面花了太多时间。

HTML:

    <title>My Reporting System</title>
    <link rel="stylesheet" type="text/css" href="style.css" />    
<body>
    <div id="user-logged">
        You are logged in as : <strong>User</strong><br>Logout
    </div>
    <hr>
    <div>
        <a id="logo" href=".">
            <img id="logo" src="images/logo.png" alt="BRS"/>
        </a>
        <div id="sidebar"> 
            <h1 style="color:#fff; padding-left:20px; font-size:15px;">
                My Reporting System
            </h1>
            <ul>
                <li>Outlet Settings</li>
                <li>Update Daily Stats</li>
                <li>Void Stats</li>
                <li>Email Report</li>
            </ul>
        </div>
    </div>
    <div class="body-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam  
    pharetra eget lacus vitae elementum. Morbi a justo est. Aenean aliquet    
    elit ac nunc vestibulum rutrum. Vestibulum blandit pellentesque erat, a 
    imperdiet sem. In egestas in sapien at pellentesque. Praesent non 
    commodo nunc. Integer porta malesuada placerat. Maecenas nec sem varius, 
    suscipit sem vitae, vulputate ligula. Nam sed ligula suscipit, faucibus 
    augue et, iaculis nibh. Cum sociis natoque penatibus et magnis dis 
    parturient montes, nascetur ridiculus mus.

        Nam at neque vel est elementum tincidunt. Nullam accumsan finibus 
    mauris, non auctor enim. Vestibulum ante ipsum primis in faucibus orci 
    luctus et ultrices posuere cubilia Curae; Ut at ligula eu turpis 
    volutpat aliquet et et quam. Aliquam est nulla, eleifend eu nibh a, 
    lobortis mollis ex. Class aptent taciti sociosqu ad litora torquent per 
    conubia nostra, per inceptos himenaeos. Sed cursus, dui eu finibus 
    ultricies, leo velit laoreet sapien, in pretium lectus ipsum quis 
    turpis. Ut ornare nulla eu facilisis condimentum. Etiam venenatis tellus 
    et lorem dapibus, et vestibulum mauris facilisis. Etiam quis feugiat 
    orci, sit amet blandit nisl.

        Phasellus feugiat auctor vehicula. Quisque congue enim leo, nec 
   sagittis sem tincidunt vitae. In in tellus lacus. Aenean porta ligula sed 
 est bibendum, sed tincidunt eros pellentesque. Suspendisse potenti. Lorem 
 ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae lacus a 
 justo tempor semper nec eu nisl. In a odio feugiat, mattis urna eu, 
 efficitur risus. Aliquam laoreet a magna vitae convallis. Quisque vehicula 
 urna sit amet nisl faucibus facilisis. Quisque velit arcu, pretium sit amet 
 solli citudin quis, venenatis vitae lectus. Quisque aliquam scelerisque 
 metus, vitae hendrerit ipsum porta at. Ut nec dui non metus gravida 
 ultrices. Donec id arcu sit amet enim auctor iaculis nec a velit. Etiam 
 lobortis vulputate pharetra. Ut pellentesque pellentesque ligula non 
efficitur.

        In sit amet velit accumsan, cursus ipsum eget, fringilla magna. 
Proin quam eros, gravida ut interdum ut, commodo id odio. Donec sed nisl 
dolor. Aenean metus eros, hendrerit et purus vel, ultricies ultricies magna. 
Cras lobortis, ipsum ut aliquam hendrerit, erat nulla rhoncus enim, a 
 iaculis 
 elit ante sed sem. Praesent sit amet porttitor justo. Cras aliquam purus et 
mi hendrerit iaculis. Aliquam vestibulum felis urna, sit amet hendrerit leo  
suscipit pulvinar. Nullam tempus mattis diam. Nunc ut eros nec felis congue 
molestie. Donec bibendum condimentum risus, ut tristique nisl varius at. 
Maecenas gravida lectus ac facilisis pulvinar. Nullam diam purus,  
ullamcorper 
a nunc eget, cursus vehicula eros. Integer pharetra, eros sit amet blandit 
rhoncus, elit nisi congue dolor, ac faucibus odio sem id lectus. Fusce 
tempor, metus sit amet ultrices egestas, tortor ligula egestas est, a 
condimentum tellus velit nec augue. Aliquam arcu velit, sagittis nec risus 
in, eleifend iaculis dui.

        Nulla interdum gravida gravida. In vel facilisis ex. Etiam risus 
est, ornare eget bibendum a, convallis vel turpis. Nullam lacinia leo quam, 
vel malesuada libero faucibus vitae. In in velit interdum, hendrerit erat 
 sit 
amet, gravida nisl. Praesent a porta massa. Nunc sagittis purus tortor, ut 
elementum massa efficitur vel. Vestibulum hendrerit convallis lectus, vitae 
scelerisque dolor fermentum vel. Sed mauris ligula, facilisis vel neque vel, 
pretium fermentum diam. Aliquam ullamcorper dolor mauris, ac dictum ipsum 
consectetur at.

        Aliquam et posuere ligula, in scelerisque sem. Proin euismod finibus 
libero sagittis placerat. Morbi vehicula nulla enim, vel mollis metus 
tincidunt eu. Phasellus ipsum lorem, finibus eget mattis nec, suscipit vitae 
enim. Donec sed sagittis elit. Suspendisse id malesuada justo, et venenatis 
arcu. Nullam mauris est, iaculis eget imperdiet nec, feugiat quis lectus. Ut 
id nulla dui. Vivamus pretium metus fringilla mi tincidunt commodo.

        Proin id augue eu justo euismod vulputate a eget sapien. Nunc sit 
 amet tellus dapibus, vulputate ante fringilla, scelerisque neque. Etiam in 
 porttitor metus, quis lacinia diam. Maecenas vel sem purus. Nam id tortor 
 sit amet urna semper accumsan vitae quis purus. Integer nibh dui, maximus 
 vel tellus ac, pretium dictum tortor. Duis non dolor sit amet risus 
 sollicitudin convallis nec sit amet velit. Etiam porttitor sit amet libero 
 id tristique. Vivamus nec egestas neque. Sed lobortis consectetur dolor, 
 vitae gravida sapien. Mauris nec leo volutpat, tristique nisl vel, euismod 
 ante. Quisque aliquet urna elit, sit amet mattis mi iaculis ut. Donec risus 
 libero, ultricies vel erat quis, gravida egestas dui. Nam imperdiet arcu in 
 sollicitudin aliquam. Proin sit amet erat quis est porta pharetra.

        Nam tortor purus, aliquam id imperdiet ac, pulvinar ut ligula. 
  Pellentesque sollicitudin augue at dolor tristique elementum. Curabitur 
 posuere finibus nulla sit amet maximus. Donec lobortis justo eu sem 
 lobortis, quis convallis magna ultrices. Maecenas nunc ligula, tincidunt at 
 felis a, volutpat 
 scelerisque leo. Cras auctor velit nec orci rutrum commodo. Vestibulum 
bibendum elit nec quam ultricies facilisis. Maecenas mattis sem ut lorem 
luctus, eu 
 suscipit erat elementum. Sed posuere, orci nec pretium convallis, sem odio 
sodales metus, sit amet consectetur elit justo non mauris. Proin nec nibh  
 sit 
amet diam varius mattis rutrum a erat. In hac habitasse platea dictumst. 
Praesent ut porta nunc, a tincidunt lectus.

        Mauris leo purus, tincidunt sit amet urna et, vehicula rutrum nunc. 
  Suspendisse volutpat varius nisl in tincidunt. Maecenas ac convallis ex, 
 eu gravida libero. Vivamus elit tortor, pharetra vestibulum tincidunt vel, 
 tincidunt id nulla. Donec finibus eros sed felis sollicitudin condimentum 
 ut at orci. Nullam at risus tincidunt, viverra quam sed, eleifend mi. Donec 
 eu neque ac arcu porta euismod.

        Nullam vel pellentesque nisl. Class aptent taciti sociosqu ad litora 
  torquent per conubia nostra, per inceptos himenaeos. Sed malesuada dolor 
   quis tortor auctor pharetra. Aenean pretium sem rhoncus, pretium arcu 
  sed, sagittis leo. Aliquam tincidunt, est non condimentum maximus, purus 
  ex feugiat ante, vitae rhoncus mi orci sed orci. Curabitur fermentum urna 
  ut 
 dolor aliquam ornare. Vivamus tempus a massa ac tincidunt. Donec lacinia mi 
  ac odio commodo volutpat. Sed eu dolor tincidunt, convallis lectus at, 
  feugiat dolor. Donec vehicula dolor ut dictum volutpat.

    </div>
    <div id="footer">
        Test 2015. All rights reserved.
    </div>      
</body>

CSS:

#logo {
    position:absolute;
    top:5px;
    left:15px; 
    width:150px;
    height:auto;
}
#sidebar {      
    width:200px;
    min-height:500px;
    height:auto;    
    background-color: #6699cc;
    padding:1px;
}
#user-logged {
    top:0px;
    right:0px;
    text-align: right;
    padding-top:50px;
    padding-right:10px;
    margin-left:200px;
    height:50px;
    min-width:200px;
}
.body-content {
    position:absolute; 
    top:126px;
    margin-left:202px;
    min-height:700px;
    background-color: #ccc;   
    width:80%;
    clear:both;
    height: auto !important;
}
#footer {
    position:absolute;
    padding-top:20px;
    width:100%;
    height:150px;
    font-size:12px;
    background-color: #cc9966;
    text-align:center;
    font-weight:bold;
    color:#fff;
}

最佳答案

问题是由您绝对定位 .body-content div 的方式引起的。绝对定位的 div 被有效地从文档流中移除，因此页脚不知道如何出现在内容 div 之后，而是向上移动到下一个逻辑位置。我在这里做了一些修改，让您了解如何使用 float 代替绝对定位。

修改包括 float 侧边栏和.body-content，从.body-content中移除clear: both，调整.body-content 的宽度。您可能需要进一步调整，但这应该会为您指明正确的方向。

(如果需要绝对定位，您可能需要采取不同的方法。)

#logo {
  position: absolute;
  top: 5px;
  left: 15px;
  width: 150px;
  height: auto;
}
#sidebar {
  width: 200px;
  min-height: 500px;
  height: auto;
  background-color: #6699cc;
  padding: 1px;
  float: left;
}
#user-logged {
  top: 0px;
  right: 0px;
  text-align: right;
  padding-top: 50px;
  padding-right: 10px;
  margin-left: 200px;
  height: 50px;
  min-width: 200px;
}
.body-content {
  float: left;
  min-height: 700px;
  background-color: #ccc;
  width: 65%;
  height: auto !important;
}
#footer {
  clear: both;
  padding-top: 20px;
  width: 100%;
  height: 150px;
  font-size: 12px;
  background-color: #cc9966;
  text-align: center;
  font-weight: bold;
  color: #fff;
}

<div id="user-logged">
  You are logged in as : <strong>User</strong>
  <br>Logout

</div>
<hr>



<div>
  <a id="logo" href=".">
    <img id="logo" src="images/logo.png" alt="BRS" />
  </a>
  <div id="sidebar">

    <h1 style="color:#fff; padding-left:20px; font-size:15px;">My 
    Reporting System</h1>


    <ul>
      <li>Outlet Settings</li>
      <li>Update Daily Stats</li>
      <li>Void Stats</li>
      <li>Email Report</li>
    </ul>
  </div>
</div>


<div class="body-content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pharetra eget lacus vitae elementum. Morbi a justo est. Aenean aliquet elit ac nunc vestibulum rutrum. Vestibulum blandit pellentesque erat, a imperdiet sem. In egestas in sapien at pellentesque.
  Praesent non commodo nunc. Integer porta malesuada placerat. Maecenas nec sem varius, suscipit sem vitae, vulputate ligula. Nam sed ligula suscipit, faucibus augue et, iaculis nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
  ridiculus mus. Nam at neque vel est elementum tincidunt. Nullam accumsan finibus mauris, non auctor enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut at ligula eu turpis volutpat aliquet et et quam. Aliquam
  est nulla, eleifend eu nibh a, lobortis mollis ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed cursus, dui eu finibus ultricies, leo velit laoreet sapien, in pretium lectus ipsum quis turpis. Ut ornare
  nulla eu facilisis condimentum. Etiam venenatis tellus et lorem dapibus, et vestibulum mauris facilisis. Etiam quis feugiat orci, sit amet blandit nisl. Phasellus feugiat auctor vehicula. Quisque congue enim leo, nec sagittis sem tincidunt vitae. In
  in tellus lacus. Aenean porta ligula sed est bibendum, sed tincidunt eros pellentesque. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae lacus a justo tempor semper nec eu nisl. In a odio feugiat, mattis
  urna eu, efficitur risus. Aliquam laoreet a magna vitae convallis. Quisque vehicula urna sit amet nisl faucibus facilisis. Quisque velit arcu, pretium sit amet solli citudin quis, venenatis vitae lectus. Quisque aliquam scelerisque metus, vitae hendrerit
  ipsum porta at. Ut nec dui non metus gravida ultrices. Donec id arcu sit amet enim auctor iaculis nec a velit. Etiam lobortis vulputate pharetra. Ut pellentesque pellentesque ligula non efficitur. In sit amet velit accumsan, cursus ipsum eget, fringilla
  magna. Proin quam eros, gravida ut interdum ut, commodo id odio. Donec sed nisl dolor. Aenean metus eros, hendrerit et purus vel, ultricies ultricies magna. Cras lobortis, ipsum ut aliquam hendrerit, erat nulla rhoncus enim, a iaculis elit ante sed
  sem. Praesent sit amet porttitor justo. Cras aliquam purus et mi hendrerit iaculis. Aliquam vestibulum felis urna, sit amet hendrerit leo suscipit pulvinar. Nullam tempus mattis diam. Nunc ut eros nec felis congue molestie. Donec bibendum condimentum
  risus, ut tristique nisl varius at. Maecenas gravida lectus ac facilisis pulvinar. Nullam diam purus, ullamcorper a nunc eget, cursus vehicula eros. Integer pharetra, eros sit amet blandit rhoncus, elit nisi congue dolor, ac faucibus odio sem id lectus.
  Fusce tempor, metus sit amet ultrices egestas, tortor ligula egestas est, a condimentum tellus velit nec augue. Aliquam arcu velit, sagittis nec risus in, eleifend iaculis dui. Nulla interdum gravida gravida. In vel facilisis ex. Etiam risus est, ornare
  eget bibendum a, convallis vel turpis. Nullam lacinia leo quam, vel malesuada libero faucibus vitae. In in velit interdum, hendrerit erat sit amet, gravida nisl. Praesent a porta massa. Nunc sagittis purus tortor, ut elementum massa efficitur vel. Vestibulum
  hendrerit convallis lectus, vitae scelerisque dolor fermentum vel. Sed mauris ligula, facilisis vel neque vel, pretium fermentum diam. Aliquam ullamcorper dolor mauris, ac dictum ipsum consectetur at. Aliquam et posuere ligula, in scelerisque sem. Proin
  euismod finibus libero sagittis placerat. Morbi vehicula nulla enim, vel mollis metus tincidunt eu. Phasellus ipsum lorem, finibus eget mattis nec, suscipit vitae enim. Donec sed sagittis elit. Suspendisse id malesuada justo, et venenatis arcu. Nullam
  mauris est, iaculis eget imperdiet nec, feugiat quis lectus. Ut id nulla dui. Vivamus pretium metus fringilla mi tincidunt commodo. Proin id augue eu justo euismod vulputate a eget sapien. Nunc sit amet tellus dapibus, vulputate ante fringilla, scelerisque
  neque. Etiam in porttitor metus, quis lacinia diam. Maecenas vel sem purus. Nam id tortor sit amet urna semper accumsan vitae quis purus. Integer nibh dui, maximus vel tellus ac, pretium dictum tortor. Duis non dolor sit amet risus sollicitudin convallis
  nec sit amet velit. Etiam porttitor sit amet libero id tristique. Vivamus nec egestas neque. Sed lobortis consectetur dolor, vitae gravida sapien. Mauris nec leo volutpat, tristique nisl vel, euismod ante. Quisque aliquet urna elit, sit amet mattis
  mi iaculis ut. Donec risus libero, ultricies vel erat quis, gravida egestas dui. Nam imperdiet arcu in sollicitudin aliquam. Proin sit amet erat quis est porta pharetra. Nam tortor purus, aliquam id imperdiet ac, pulvinar ut ligula. Pellentesque sollicitudin
  augue at dolor tristique elementum. Curabitur posuere finibus nulla sit amet maximus. Donec lobortis justo eu sem lobortis, quis convallis magna ultrices. Maecenas nunc ligula, tincidunt at felis a, volutpat scelerisque leo. Cras auctor velit nec orci
  rutrum commodo. Vestibulum bibendum elit nec quam ultricies facilisis. Maecenas mattis sem ut lorem luctus, eu suscipit erat elementum. Sed posuere, orci nec pretium convallis, sem odio sodales metus, sit amet consectetur elit justo non mauris. Proin
  nec nibh sit amet diam varius mattis rutrum a erat. In hac habitasse platea dictumst. Praesent ut porta nunc, a tincidunt lectus. Mauris leo purus, tincidunt sit amet urna et, vehicula rutrum nunc. Suspendisse volutpat varius nisl in tincidunt. Maecenas
  ac convallis ex, eu gravida libero. Vivamus elit tortor, pharetra vestibulum tincidunt vel, tincidunt id nulla. Donec finibus eros sed felis sollicitudin condimentum ut at orci. Nullam at risus tincidunt, viverra quam sed, eleifend mi. Donec eu neque
  ac arcu porta euismod. Nullam vel pellentesque nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed malesuada dolor quis tortor auctor pharetra. Aenean pretium sem rhoncus, pretium arcu sed, sagittis
  leo. Aliquam tincidunt, est non condimentum maximus, purus ex feugiat ante, vitae rhoncus mi orci sed orci. Curabitur fermentum urna ut dolor aliquam ornare. Vivamus tempus a massa ac tincidunt. Donec lacinia mi ac odio commodo volutpat. Sed eu dolor
  tincidunt, convallis lectus at, feugiat dolor. Donec vehicula dolor ut dictum volutpat.

</div>
<div id="footer">
  Test 2015. All rights reserved.
</div>

关于html - CSS布局，页脚在内容的中间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33139628/

文章推荐： html - 我怎样才能为 safari 浏览器提供不同的 css

scala - Scala中列表的模式匹配结束/中间
有人可以给我一个更简单的以下代码的解决方案(它正在展开给定结构 0xFC :: len :: payload :: ... :: 0x0A :: 0x0D 的整数列表): object Payload
SSL 中间 SHA2
我已经在我的网站上安装了 SSL 证书，但 intermediate.crt 无法正常工作。任何 SSL 检查器(例如 GeoTrust Checker)都告诉我，缺少中间 key 。网站上已经使用了
html - 如何将图像垂直和水平放置在中心/中间
如何让图像从这个框的中间开始？ (中间纵横) 最佳答案有几种方法可以做到这一点，如果它需要在所有浏览器(IE7+ 和其他浏览器)中工作，你需要做不同的事情来让它在某些情况下工作。使用绝对位置
CSS:最小高度和垂直对齐:中间
如何强制 min-height 和 vertical-align:middle 为 td 元素或其内部元素工作？最佳答案 td 元素上的 height 等同于 min-height，因为如果需要，表
jquery - 滚动到元素并将其放置在 View 中间
我正在尝试自动滚动到订单簿的中间行。我有 orderBook div，其中放置了带有 orderBook 的表。该表的其中一行有一个 id middleRow。我想做的是滚动该行并将其放置在 ord
javascript - 计算变换原点以将图像缩放到视口(viewport)中间
我正在尝试在 javascript 中计算绝对定位元素的 transform-origin 属性，以便它们在悬停时填充整个视口(viewport)。我尝试通过 x 除以窗口宽度和 y 除以窗口高度来
regex - 删除开头、中间、结尾的空格
我有休闲字符串 ' this is my string ' 是否可以删除开头和结尾的所有空格，只在单词之间留一个空格。要选择我使用过的所有空间: SELECT regexp_replace('
mysql - 中间 SQL 表 : What for?
我正在设法创建我的第一个复杂的 J2E 解决方案，并且在每个教程中我都发现了某种中间表的用法，如下所示: 表:用户、用户角色、角色虽然逻辑会简单地向用户表添加一个键来引用它在角色表上的角色，但为什么要
jquery - 如何将图像元素定位在视口(viewport)中间？
我正在寻找以下解决方案。我想定位一个图像元素，例如在中间。所以高度是视口(viewport)的高度，宽度会自动设置，图像的中间应该在视口(viewport)宽度的中间。我搜索的一个例子就像下面的网
html - 中间 Bootstrap 网格类
我正在设计一种布局，它更像是注册用户的个人仪表板。我让它变得简单，使用基本的 2 列网格，一个用于侧边栏，一个用于主要内容。因为，例如，80% 的网站使用将发生在一个单独的子系统中，在无 chrom
html - 我试图将文本居中放置在我的页面 HTML 中间
我有三个不同的 div 标签(不在彼此内部)和代码，所以它有一个把单词放在左边、中间或右边，但中心非常偏离中心。这是 HTML 代码: .desc { float: right; color:
CSS 中间 div 高度
我有以下CSS http://jsbin.com/azivip/75/edit我想让黄色的 div 高度填充蓝色和绿色 div 之间的空间。使用高度继承似乎使 div 超出了绿色 div。有什么想法
html - 使用相对和绝对属性将元素定位在 div 中间
我不得不在其父元素的中间放置一些文本。我用下面的代码实现了它: #div1 { position: relative; margin: 0; padding: 0; } #div2 {
中间/链证书的 SSL 证书错误
发现一个使用合法证书(由thawte 签名)的网站，但所有浏览器都会拒绝它。我不明白为什么。thawte 的支持告诉我一个域有两个证书，然后将这个 https://www.sslshopper[dot
ssl - 中间 CA 的证书链问题
我正在尝试使用 OpenSSL 创建证书链，但出于某种原因，当我在我的计算机上安装我的根 CA 并尝试验证证书链时，它总是告诉我它找不到证书的颁发者.为了让事情发生，我必须安装中间 CA，这是没有意义
http - 中间 HTTP 缓存是什么以及在哪里
我看到 REST 的一大好处是依赖 HTTP 缓存。我不是在争论这个，而是完全认同这个想法。但是，我从来没有看到对中间 HTTP 缓存的更深入的解释。如果我将 Cache-control heade
html - 中间 Angular 左右双按钮
查看此图片 Facebook Messenger Android App Buttons ( MESSENGER\ACTIVE ) 我怎样才能做到这一点？详细信息:- 带有 2px 红色边框的 di
html - 中间 CSS 中带有白线的文本
我的任务是制作漂亮的文本，在文本中间加一条白线，如下图所示。是否可以使用 css 来实现？这是 Fiddle .container{ height:200px; width:400px;
python - 有没有办法比较阿拉伯字符而不考虑它们的初始/中间/最终形式？
在拉丁文字中，字母有大写和小写形式。在 Python 中，如果你想比较两个字符串而不考虑它们的大小写，你可以使用 'string'.upper() 或 'string'.lower() 将它们转换为相
linux - 在没有临时(中间)文件的情况下处理同一文件
我正在使用 awk 对文件进行一些文本处理。例如删除尾随空格。 awk '{gsub(/ +$/, "")} {print $0}' filename 这很好用。但是当我将输出重定向到原始文件时。它变

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - CSS布局，页脚在内容的中间