Question

我想放3行 1-第一个具有固定高度 2秒可以灵活调整其余大小，但问题是第三行，因为它在某些情况下会找到，我希望在所有情况下都可以第二调整大小 3-如果建立，则取固定高度

仅供参考：容器行的高度固定

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

.row-1
{
  height: 50px;
}

.row-2
{
}

.row-3
{
  height: 50px; 
}

Answer 1

如果可以使用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>

Answer 2

<!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>

Answer 3

您需要使用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>

CSS 3行，第一行固定大小，最后一行固定大小，居中放置

3 个答案: