Вопросы Теги

100%-е расположение CSS с заголовком и нижним колонтитулом

Я пытаюсь создать расположение с заголовком и нижним колонтитулом (оба из которых имеют фиксированные высоты) и довольное отделение между ними, которое является заливками остающееся пространство. В довольном отделении я хочу иметь отделения с высотами, которые основаны на процентных значениях (с высотой довольного отделения как родитель). Я не могу выяснить, как сделать это?

Вот иллюстрация того, что я пытаюсь выполнить. layout example

7
задан Glorfindel 1 August 2019 в 03:06
поделиться

2 ответа

[Посмотрите это в действии]

  #header { 
    position:absolute; 
    height: 50px; 
    left:0; 
    top:0; 
    width:100%; 
    background:green;
  }

  #footer { 
    position:absolute; 
    height: 50px; 
    left:0; 
    bottom:0; 
    width:100%;
    background:green;
  }

  #content { 
    position: absolute; 
    top:50px; 
    bottom:50px; 
    left:0;
    width:100%;
    background:#eee; 
  }

  #box1 { 
    height:50%; 
    width:30%; 
    float:left; 
    background:red; 
  }
5
ответ дан 7 December 2019 в 09:56
поделиться 
.header {
  position: absolute;
  height: 50px;
  left: 0;
  top: 0;
  right: 0;
}

.footer {
  position: absolute;
  height: 50px;
  left: 0;
  bottom: 0;
  right: 0;
}

.content {
  position: absolute
  top: 50px;
  left: 0px;
  right: 0px;
  bottom: 50px;
}

.box1 {
  width: 30%;
  height: 50%;
}
1
ответ дан 7 December 2019 в 09:56
поделиться
Другие вопросы по тегам:

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