Вопрос по css, html, height – Как сделать div растянуть его высоту между двумя другими div и центрировать его содержимое

4

Я хочу сделать макет одной колонки с 3 разделами

Раздел 1: Заголовок Раздел 2: Раздел содержимого, который простирается от верхнего до верхнего колонтитула, причем его содержимое центрируется по вертикали и горизонтали внутри самого элемента. Раздел 3: Нижний колонтитул, который всегда находится внизу окна браузера.

Эта проблема:

Я не могу получить содержимое div, чтобы оно доходило до начала нижнего колонтитула. Если я введу высоту: 100%, она автоматически растянется до конца всей страницы.

Также хотел бы центрировать содержимое внутри этого среднего div вертикально и горизонтально - хотя я еще не пытался это сделать.

Также не понимаю, почему фон текста заголовка не цветной. даже если div подзаголовка инкапсулирован div заголовка, у которого определен цвет фона.

Спасибо!

http://jsbin.com/ixipug/1/edit

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

html {
    height: 100%;

}

body {

    height: 100%;
    margin-left: 20px;
    margin-top:0px;
    margin-bottom: 0px;


}

#containerHeaderContent {
   min-height:100%;
   height: auto;
   height: 100%;
   margin: 0 auto -1.5em;
}

.push {
height: 1em;
}

.header {
    background-color: aqua;
    padding-top:20px;
    }


.subheader-left {

    float:left;
    font-family: serif;
    font-size: 20px;
    text-align: left;
}


.subheader-right{

    float: right;
    font-family: sans-serif;
    font-size: 12px;
    padding-right: 20px;}

.middleSection {
    padding-top: 10px;
    clear:both;
    width:100%;
    height auto;
    background-color: #e8e7e7;

}


.bottom{
background-color: red;
position: absolut;
height: 1em;
font-size: small;

}
.bottom-left {

    float:  left;
    font:   sans-serif;
    left:   20px;
}


.bottom-right {

    float:      right;
    right:      15px;
    font-style: italic;
    color:      #8e8e8e;
    font-size:  11px;
}

</style>

<title>XYZ</title>

</head>
<body>

<div id="containerHeaderContent">

    <div class="header">
        <div class="subheader-left">XYZ</div>
        <div class="subheader-right">LOREM</div>
    </div>

 <div class="middleSection">Content Vertical and Horizontally Centered inside DIV</div> 

<div class="push"></div>

</div>

<div class="bottom">
    <div class="bottom-left">
        <span class="about">
            <span class="bold">XYZ</span> is a project by XZY.&nbsp;&nbsp;&#124;&nbsp;
            <span="address">Website Information</span> &mdash; <a href="mailto:[email protected]">[email protected]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


        </span>
</div>


<div class="bottom-right">
    <span class="openinghours">Open by Appointment</span><span class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sponsored by XYZ</span>
</div>
</div>

</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

</body>
</html>

Ваш Ответ

2   ответа
6

2018 update

используйте flexbox или css grid. Вот пример flexbox. Сетка Css может быть еще проще, но поддержка все еще довольно низкая:

body, html { padding: 0; margin: 0; }
header { background: #faa; }
article { background: #afa; }
footer { background: #aaf; }

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

article {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="page">
  <header>header content</header>
  <article>main content</article>
  <footer>footer content</footer>
</div>


Не нужно использовать таблицы! Некоторые простые CSS сделают хорошо.

DEMO:http://jsbin.com/azivip/2/edit

HTML-разметка:

<body>
  <div id="content">
    <div id="header">
      This is the header
    </div>
    <div id="inner">
      This is the body
     </div>
    <div id="footer">
      this is the footer
    </div>
  </div>
</body>

CSS:

body{
  height:100%;
  padding:0px;
  margin:0px;
}
    #content{
      position:relative;
      bottom:0px;
      width:100%;
      height:100%;
    }
        #header{
          position:relative;
          bottom:0px;
          width:100%;
          height:100px;    /* Edit for height of header*/
          background:#f00;
        }
        #inner{
          width:100%;
          text-align:center;
          position: absolute; 
          top: 50%;
          display: table-cell; 
          vertical-align: middle;
        }
        #footer{
          position:absolute;
          bottom:0px;
          width:100%;
          height:100px;   /* Edit for height of footer */
          background:#0f0;
        }

Для того чтобы#inner чтобы оставаться в центре по вертикали даже с многострочным контентом, вам необходимо использовать Javascript / jQuery. Ниже приведен пример сценария, который "тянет вверх"#inner только правильное количество, чтобы быть в центре.

var mrgntop = -Math.floor($("#inner").height() / 2);
$("#inner").css({"margin-top":mrgntop});
Это здорово, я не знаю, почему я не подумал об этом :) +1 для неtable решение.
очень хорошо! Спасибо! один вопрос, хотя - возможно ли для многострочного контента в средней секции автом. быть в центре, сверху: 50% отлично работает для одной строки текста, но не для изображения или нескольких строк. Еще раз спасибо! Roland
Полагаю, решение Майкла хорошее, нужно только изменить нижний колонтитул на фиксированный?
Ты можешь использовать:img { margin: 0px auto; } для центрирования изображений по горизонтали. А также посмотрите здесь:pastebin.com/JRFMyGUf
@Roland Во-первых, продолжайtop: 50%затем вы можете использовать Javascript / jQuery, чтобы «подтянуть» его. в нужном количестве.var mrgntop = - Math.floor($("#inner").height() / 2); $("#inner").css({"margin-top":mrgntop});
1

<table> это то, что вам нужно использовать в этом случае. HTML будет выглядеть примерно так:

<table class = "wrapper">
    <tr><td class = "header">I'm the header.</td></tr>
    <tr><td valign = "middle" class = "content">Some content. Some content. More content. More content. Content is great. Content is a great thing to talk about when trying to insert random content to elaborate behavior. Content.</td></tr>
    <tr><td class = "footer">I'm the footer.</td></tr>
</table>

Пример CSS:

html, body, .wrapper {
   height: 100%;   
}
.header {
    height: 100px; /*This value can be anything*/
}
.content {
    text-align: center;
}
.footer {
    height: 100px;
}

Демо-версия:jsFiddle. Note how the content is centered both vertically and horizontally.

Надеюсь, что это помогло!

Спасибо! но нет ли способа сделать это с помощью CSS? (царапает голову) Roland
@Roland Я не думаю, что есть способ сделать это, используя чистый CSS, к сожалению, если вы не можете также использовать Javascript. Но я думаю, что в этом нет необходимости - использование Javascript требует гораздо больше накладных расходов и «затрат». чем с помощью таблицы, имхо.
Таблицы для разметки - да или нет?stackoverflow.com/questions/83073/…

Похожие вопросы