css div文本调整但背景保持静态

时间：2013-05-04 16:34:30

标签： html css

我正在试图实现2列和页脚css布局，问题是只要我在内容div上插入一些文本，页脚就会向下移动文本而不是背景，让我告诉你：< / p>

这是没有文字的页面：

enter image description here

和他是带有文字的页面： enter image description here

以下是该页面的HTML：

  <div class="header">
        <div class="right textHeader">
          <div class="left logo"><p class="title">Portal para la gestión y control<br>
            de la implementación del sistema de información PAI
               </p> 
            </div> 
            <div class="right textInfo">
                <div class="left greetTime">
                   <img src="/Content/Images/calendar.png">  04/05/2013 11:30:03 a.m.
                </div>

                    <div class="greet">
                        <img src="/Content/Images/Login-32.png">
                        <a href="/Account/Login" id="loginLink">Conectarse</a></div>  
            </div>
        </div>

        <div class="left imgHeader">
            <img src="/Content/Images/logo-minSalud.png">
            <img src="/Content/Images/logo-prosperidad.png">
        </div>

    </div>



<div id="navigation" class="navigation detached-item-556">
<div class="nav-menu" id="menu_641">
    <ul>
 <li><a href="/">Inicio</a> </li>


<li> <a href="/SupportItem/List">Banco de Información</a>  
    <ul>
       <li> <a class="" href="/SupportItem/List?category=Funcional&amp;page=1">Funcional</a></li>
        <li> <a class="" href="/SupportItem/List?category=Te%C3%B3rico&amp;page=1">Teórico</a></li>
    </ul>


</li>
  </ul>

</div>
</div>
    <div id="content">



<h2>Bienvenido</h2>



    <div id="homeContent">
        <div class="newsAndOptions">
        <div id="contentColumn">
            <div class="innertube">                

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit a sem semper cursus. Integer id justo at turpis laoreet tincidunt. Donec sollicitudin tincidunt dui a pretium. Fusce at metus non nibh interdum dapibus vel gravida metus. Nam luctus lorem ac mauris convallis sit amet scelerisque ligula rhoncus. Donec vel quam quis lacus suscipit rutrum semper et ligula. Vestibulum tincidunt purus ut neque eleifend commodo. Cras aliquam accumsan sapien quis imperdiet. Praesent blandit tincidunt ullamcorper. Donec pellentesque nisi non libero bibendum vulputate. Fusce commodo bibendum egestas. Maecenas facilisis nibh ut mauris euismod pretium. In vestibulum viverra felis sed imperdiet. Donec scelerisque sem bibendum lorem elementum quis venenatis dui vestibulum. Nullam vulputate mollis nisi, at ultricies ipsum imperdiet sed.

Suspendisse nibh nisi, rutrum non congue at, facilisis quis odio. Nullam feugiat nisl quis erat porta semper. Suspendisse sollicitudin rutrum lectus, eget venenatis nisl sagittis eget. Praesent hendrerit elementum orci, pretium convallis ante posuere eu. Pellentesque sem velit, lacinia ac suscipit nec, ullamcorper a turpis. Cras non leo lorem, at blandit quam. Mauris feugiat, est vel pharetra mattis, neque purus pharetra mi, ut mattis diam nisl consectetur urna. Integer ante odio, tempor a mollis eget, tempor vitae mauris. Aliquam ac leo justo, vitae mattis nibh. Nunc risus magna, cursus in sagittis sit amet, sagittis eu ante. Nunc eu mauris ut nisi vulputate sollicitudin.

Vestibulum elementum massa vel enim vehicula dictum sagittis elit pulvinar. Maecenas non ligula massa, id eleifend velit. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ullamcorper pulvinar lobortis. Donec in dolor tortor, rhoncus lobortis dolor. In libero nulla, pharetra eleifend bibendum nec, dignissim sit amet libero. Aenean quam lorem, eleifend eu rhoncus feugiat, tempor eget mauris. Donec in neque at urna facilisis vestibulum. Vestibulum eu turpis sem.

In ac rhoncus dui. Nunc porta nibh quis nisi lacinia porttitor. Sed bibendum est sit amet mauris ultricies congue. Maecenas at libero at dui semper pharetra eget nec dui. Nam ornare tincidunt neque, nec laoreet justo cursus id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce mi ligula, mollis sit amet sodales quis, aliquam a augue. Sed a massa metus. Proin aliquam elementum tellus placerat rhoncus. Sed vitae leo arcu. Morbi porta ultricies diam, sed tristique neque fermentum id.

Pellentesque id pellentesque lacus. Pellentesque nec ligula purus. Vestibulum luctus dui sed dolor hendrerit porta. Proin molestie, ante quis pharetra semper, libero massa consectetur mi, vitae volutpat nisi justo a ligula. Fusce ultrices consectetur ullamcorper. Donec venenatis neque eleifend nisl lacinia interdum. Duis velit risus, interdum eget rhoncus vitae, tristique pretium est. Nulla semper tellus eu quam dignissim ut viverra ipsum laoreet. Vivamus non dui magna. Nunc aliquam orci quis sapien semper vel dictum diam consequat. Nam ut urna nec dui egestas facilisis. 
            </div>

        </div>
        <div id="rightColumn">

        </div>



        </div>


    <div class="footGobierno">    
    <div class="linkGobierno left">
    <ul>
        <li class="bullet1"><a target="_blank" href="http://www.vicepresidencia.gov.co/">
Vicepresidencia</a></li>
<li class="bullet2"><a target="_blank" href="http://www.minminas.gov.co/">
MinMinas</a></li>
<li class="bullet3"><a target="_blank" href="http://www.mintransporte.gov.co/">
MinTransporte</a></li>
<li class="bullet4"><a target="_blank" href="http://www.minjusticia.gov.co/">
MinJusticia</a></li>
<li class="bullet5"><a target="_blank" href="http://www.mincomercio.gov.co/">
MinComercio</a></li>
<li class="bullet6"><a target="_blank" href="http://www.minvivienda.gov.co">
MinVivienda</a></li>
<li class="bullet7"><a target="_blank" href="http://www.mindefensa.gov.co/">
MinDefensa</a></li>
<li class="bullet8"><a target="_blank" href="http://www.mintic.gov.co/">MinTIC</a></li>
<li class="bullet9"><a target="_blank" href="http://www.mineducacion.gov.co/">
MinEducación</a></li>
<li class="bullet10"><a target="_blank" href="http://www.mij.gov.co/">
MinInterior</a></li>
<li class="bullet11"><a target="_blank" href="http://www.mincultura.gov.co/">
MinCultura</a></li>
<li class="bullet12"><a target="_blank" href="http://www.mintrabajo.gov.co/">
MinTrabajo</a></li>
<li class="bullet13"><a target="_blank" href="http://www.cancilleria.gov.co/">
MinRelaciones</a></li>
<li class="bullet14"><a target="_blank" href="http://www.minagricultura.gov.co/">
MinAgricultura</a></li>
<li class="bullet15"><a target="_blank" href="hhttp://www.minsalud.gov.co/">
MinSalud</a></li>
<li class="bullet16"><a target="_blank" href="http://www.minhacienda.gov.co/">
MinHacienda</a></li>
<li class="bullet17"><a target="_blank" href="http://www.minambiente.gov.co/">
MinAmbiente</a></li>
<li class="bullet18"></li>
    </ul>

    </div>

    </div>
    </div>    



 <link href="/Content/bootmetro-tiles.css" type="text/css" rel="stylesheet">
    </div>

    <div class="footer">
<div class="contenf">
&copy; 2013 Ministerio de Salud y Protección Social. 
<br>

<strong>Atención al ciudadano</strong> de lunes a viernes de 8:00 a.m. a 5:00 p.m. en jornada continua<br>
<strong>Orientación personalizada</strong>: Carrera 13 No. 32- 76 Bogotá, D.C.
<strong><br>
Telefónica</strong>: Call Center (57-1) 595 35 25, opciones 1-1 o <strong>línea 
gratuita nacional </strong>018000 952525, opciones 1-1.<br>
<strong>Virtual</strong>: <a href="http://www.minsalud.gov.co/_layouts/IT.MinProteccion.PQR.WP/FrmInicioPQR.aspx">Contáctenos</a>
<strong><br>
PBX: </strong>(57-1) 330 50 00.
<strong>Línea gratuita nacional: </strong>018000 91 00 97<strong>.<span lang="es">&nbsp; 
FAX: </span></strong><span lang="es">(57-1) 330 50 50</span><br>

</div>          
</div>
    <script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery-1.9.1.js"></script>






<div style="position: fixed; top: 0px; z-index: 16777271; display: none; width: 1263px;" rel="detached-item-556" id="detached_item_556" class="navigation detached-item">
<div class="nav-menu" id="menu_641">
    <ul>
 <li><a href="/">Inicio</a> </li>


<li> <a href="/SupportItem/List">Banco de Información</a>  
    <ul>
       <li> <a class="" href="/SupportItem/List?category=Funcional&amp;page=1">Funcional</a></li>
        <li> <a class="" href="/SupportItem/List?category=Te%C3%B3rico&amp;page=1">Teórico</a></li>
    </ul>


</li>
  </ul>

</div>
</div>

并且继承了这些div的css：

    .newsAndOptions {
    float: left;
    width: 100%;

    }
    .homeContent {
float: left;
width: 100%;
}
#contentColumn {
    margin-right: 200px; /*Set right margin to RightColumnWidth*/
}
#rightColumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
background: #FDE95E;
}

#homeContent {
min-width: 760px;

}
.innertube {
margin: 10px;
margin-top: 0;

}


.linkGobierno {
    margin-left: 278px;
    width: 330px;
}
    .linkGobierno ul li a {
    color:#403f3f;
    }

.linkGobierno ul {
    list-style: none outside none;
    margin: 15px 0 0;
    padding: 0;
    }

.linkGobierno ul li {
    color: #7B7B7B;
    display: inline-block;
    float: left;
    font-size: 12px;
    line-height: 18px;
    width: 106px;
}
.footGobierno {

background:url("Images/footGobierno.jpg")no-repeat scroll 0 0 transparent;
height: 144px;
  margin-top: 30px;
}

我做错了什么？请任何帮助将不胜感激！

提前致谢

1 个答案:

答案 0 :(得分：1)

我从

中删除了float: left 
/*body index home*/
.newsAndOptions {
    width: 100%;
}

以下是您的页面： http://jsfiddle.net/U2HR8/1/

相关问题
最新问题