Как отрегулировать высоту нижнего колонтитула автоматически

Как вы можете отрегулировать высоту нижнего колонтитула в зависимости от того, как долго находится содержание div внутри тела?Как отрегулировать высоту нижнего колонтитула автоматически

Я пробовал искать решение, такое как положение нижнего колонтитула «исправлено», но это не то, что я хочу, потому что он как бы застрял в нижней части экрана. Я хочу, чтобы нижний колонтитул показывал, когда я добираюсь до нижней части страницы и автоматически меняю ее высоту, когда высота main_content изменяется, так как я поставил высоту main_content в auto. Как я могу это сделать?

Вот как это выглядит: http://jsfiddle.net/cherry12345/t62b2qb6/

Heres мой код:

HTML

<body> 
    <div id="main_content"> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
    </div> 
    <div id="footer"> 
     &copy; 2014-2015 example.com. All Rights Reserved. 
    </div> 
</body>

CSS

#main_content { 
    width: auto; 
    height:auto; 
    position:absolute; 
    top:110px; 
    left:400px; 
    background: #FFF; 
    border:1px solid lightgray; 
} 
#footer{ 
    position:absolute; 
    bottom:0px; 
    width:100%; 
    background: #666; 
    padding: 24px; 
    font-size: 12px; 
    color: #CCC; 
    text-align: center; 
}

источник

2014-09-21 noob1234

Вы хотите высота колонтитула быть пропорциональна высоте до основного содержимого? –

Не могли бы вы расшириться на '[...] и автоматически изменить его высоту, когда изменяется высота main_content.'? –

Да, как у него внизу основной области содержимого. Я сделал много страниц, и они все разные по высоте, поэтому я хочу, чтобы нижний колонтитул находился в нижней части основного содержимого, однако длинный основной контент – noob1234

Вы можете повторно организовать и падение позиционирования и заставить его работать так:

#main_content { 
    background: #FFF; 
    border:1px solid lightgray; 
} 
#main_content > p { 
    margin-left: 440px; 
} 
#main_content > p:first-child { 
    margin-top: 110px; 
} 
#footer { 
    background: #666; 
    padding: 24px; 
    font-size: 12px; 
    color: #CCC; 
    text-align: center; 
} 

<div id="main_content"> 
    <p>Some text</p> 
    ... 
    <p>Some text</p> 
    <div id="footer">&copy; 2014-2015 mysite.com. All Rights Reserved.</div> 
</div>

http://jsfiddle.net/t62b2qb6/3/

источник

2014-09-21 17:13:39

Я думаю, что это помогло бы:

#main_content { 
    width:auto; 
    background: #FFF; 
    border:1px solid lightgray; 
} 

#footer{ 
    width:100%; 
    background: #666; 
    padding: 24px; 
    font-size: 12px; 
    color: #CCC; 
    text-align: center; 
}

Fiddle

источник

2014-09-21 17:08:44

Определите HTML следующим образом:

<body> 
    <div id="wrapper"> 
     <div id="header"></div> 
     <div id="content"></div> 
     <div id="footer"></div> 
    </div> 
</body>

И CSS (обратите внимание, что нижний колонтитул должен быть абсолютным, а обертка - относительная)

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#wrapper { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    padding:10px; 
    background:#5ee; 
} 
#content { 
    padding:10px; 
    padding-bottom:80px; /* Height of the footer element */ 
} 
#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#ee5; 
}

http://jsfiddle.net/3n52zt2h/

источник

2014-09-21 17:13:47 Maigret

Как отрегулировать высоту нижнего колонтитула автоматически

ответ

Смежные вопросы