Строка CSS 3, фиксированный размер первой строки, фиксированный размер последней строки, центр покоится - PullRequest
Новая
       1

Строка CSS 3, фиксированный размер первой строки, фиксированный размер последней строки, центр покоится

0 голосов
/ 31 октября 2018

хочу поставить 3 строки 1- первый имеет фиксированную высоту 2-секундный имеет гибкий взять оставшийся размер, но проблема в третьей строке, потому что он находит в некоторых случаях, и я хочу, чтобы второй взять размер оставшегося размера во всех случаях 3 - третья, если найдена, взять фиксированную высоту

enter image description here

К вашему сведению: ряд контейнеров имеет фиксированную высоту 

.container
{
  height: 300px;
  display: flex;
  flex-direction: column;
}

.row-1
{
  height: 50px;
}

.row-2
{
}

.row-3
{
  height: 50px; 
}

Ответы [ 3 ]

0 голосов
/ 31 октября 2018 
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-family: helvetica, arial;
}
article {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
}
header {
    background: deeppink;
    padding: 1rem;
    height:25px;
}
main {
    background: whitesmoke;
    color: #444;
    padding: 1rem;
}
footer {
    background: purple;
    padding: 1rem;
    height:40px;
}
</style>
</head>
<body>
 <article>
    <header>
        Page Header
    </header>
    <main>
        Hi, there's not much content, yet. You can write in here to expand the container.
    </main>
    <footer>
        All rights reversed.
        <br>
        <small>I am always at the bottom of the page</small>
    </footer>
</article>
</body>
</html>
0 голосов
/ 31 октября 2018

Вам нужно использовать position: fixed и добавить padding in main section for header and footer

html, body {
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-family: helvetica, arial;
}
article {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
}
header {
    background: deeppink;
    padding:1rem;
    height:25px;
    position:fixed;
    top:0;
    width:100%;
}
main {
        background: whitesmoke;
    color: #444;
    padding: 1rem;
    overflow: auto;
    height: 500px;
    padding-top: 64px;
    padding-bottom: 93px;
}
footer {
    background: purple;
    padding: 1rem;
    height:40px;
    position:fixed;
    bottom:0;
    width:100%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <article>
    <header>
        Page Header
    </header>
    <main>
        Hi, there's not much content, yet. You can write in here to expand the container.
    </main>
    <footer>
        All rights reversed.
        <br>
        <small>I am always at the bottom of the page</small>
    </footer>
</article>
</body>
</html>
0 голосов
/ 31 октября 2018

Если вы в порядке с использованием flex, это может быть достигнуто следующим образом: 

.container
{
  height: 200px;
  display: flex;
  flex-direction: column;
}

.firstRow
{
  height: 50px;
  background-color: blue;
}

.secondRow
{
  background-color: red;
  flex: 1;
}

.thirdRow
{
  height: 30px;
  background-color: yellow;
}
<div class="container">
  <div class="firstRow"></div>
  <div class="secondRow"></div>
  <div class="thirdRow"></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...