英文:
How do I get my main content to take up the rest of the space left over after the header and footer?
问题
I'm working through The Odin Project and I'm having trouble making my main content take up the rest of the space of the browser.
Right now it looks like this:
The 1px solid red border is as far as the main content goes. I have tried this but it's not allowing for a fixed header and footer. I have also tried some other flex solutions. Those are commented out in the code.
Am I just doing this whole thing wrong? Is there a standard way that I don't know about?
index.html:
<body>
<div class="header">
<h1>
MY AWESOME WEBSITE
</h1>
</div>
<div class="main-content">
<div class="sidebar">
<ul>
<li><a href="#">⭐ - link one</a></li>
<li><a href="#">🏈♂️ - link two</a></li>
<li><a href="#">🌌️ - link three</a></li>
<li><a href="#">🌼🏝 - link four</a></li>
</ul>
</div>
<div class="content">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem
dignissimos
maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit
corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam
maiores
velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi
odit
ea.
</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
eligendi
aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
esse
autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
amet
adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
minima
laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
eligendi
aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
esse
autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
amet
adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
minima
laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
</body>
style-07.css:
:root{
--header-height: 72px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
height: 100%;
}
.main-content{
display: flex;
height: 100%;
padding-top: var(--header-height);
flex-direction: row;
border: 1px solid red;
}
.sidebar{
flex-shrink: 0;
}
.content {
padding: 32px;
display: flex;
flex-wrap: wrap;
}
.card {
width: 300px;
padding: 16px;
margin: 16px;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
height: var(--header-height);
background: darkmagenta;
color: white;
padding: 0px 15px;
}
h1 {
font-weight: 1000;
}
.footer {
height: var(--header-height);
background: #eee;
color: darkmagenta;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 5%;
display: flex;
justify-content: center;
align-items: center;
}
.sidebar {
width: 300px;
background: royalblue;
box-sizing: border-box;
padding: 16px;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
border-radius: 4px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
font-size: 24px;
}
li{
margin-bottom: 16px;
}
英文:
I'm working through The Odin Project and I'm having trouble making my main content take up the rest of the space of the browser.
Right now it looks like this:
The 1px solid red border is as far as the main content goes. I have tried this but it's not allowing for a fixed header and footer. I have also tried some other flex solutions. Those are commented out in the code.
Am I just doing this whole thing wrong? Is there a standard way that I don't know about?
index.html:
<body>
<div class="header">
<h1>
MY AWESOME WEBSITE
</h1>
</div>
<div class="main-content">
<div class="sidebar">
<ul>
<li><a href="#">⭐ - link one</a></li>
<li><a href="#">🦸🏽♂️ - link two</a></li>
<li><a href="#">🖌️ - link three</a></li>
<li><a href="#">👌🏽 - link four</a></li>
</ul>
</div>
<div class="content">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem
dignissimos
maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit
corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam
maiores
velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi
odit
ea.
</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
eligendi
aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
esse
autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
amet
adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
minima
laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
eligendi
aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
esse
autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
amet
adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
minima
laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
</body>
</html>
style-07.css:
:root{
--header-height: 72px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
height: 100%;
}
.main-content{
display: flex;
height: 100%; /* If I use px units it will force the main content to go down but I know that is not ideal. */
padding-top: var(--header-height);
flex-direction: row;
border: 1px solid red;
/* Things I have tried from other answers*/
/* flex: 1 1 auto; */
/* height: calc(100% - var(--header-height)); */
}
.sidebar{
flex-shrink: 0;
}
.content {
padding: 32px;
display: flex;
flex-wrap: wrap;
}
.card {
width: 300px;
padding: 16px;
margin: 16px;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
height: var(--header-height);
background: darkmagenta;
color: white;
padding: 0px 15px;
}
h1 {
font-weight: 1000;
}
.footer {
height: var(--header-height);
background: #eee;
color: darkmagenta;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 5%;
display: flex;
justify-content: center;
align-items: center;
}
.sidebar {
width: 300px;
background: royalblue;
box-sizing: border-box;
padding: 16px;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
border-radius: 4px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
font-size: 24px;
}
li{
margin-bottom: 16px;
}
答案1
得分: 1
您可以在body上使用flex布局，而不是在header和footer上使用fixed，并将body的flex-direction设置为column，然后对于main-content，只需设置flex: 1并移除顶部内边距，flex: 1将确保main-content占据父容器中的剩余空间。将body的高度设置为height: 100vh，并添加overflow: hidden，对于main-content，设置overflow: auto。
此外，要使sidebar在滚动时保持粘性，我在main-content上添加了position: relative;，在sidebar上添加了position: sticky;。
为了强制设置header和footer的高度并防止它们被flex布局挤压，使用min-height而不是height，就像我在代码中修改的那样。
如果有更多问题，请留言。
<body>
<div class="header">
<h1>
我的精彩网站
</h1>
</div>
<div class="main-content">
<div class="sidebar">
<ul>
<li><a href="#">⭐ - 链接一</a></li>
<li><a href="#">🧔♂️ - 链接二</a></li>
<li><a href="#">🎖️ - 链接三</a></li>
<li><a href="#">🐶🧔 - 链接四</a></li>
</ul>
</div>
<div class="content">
<!-- 此处是您的内容卡片 -->
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
</body>
:root {
--header-height: 72px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
display: flex;
overflow-y: auto;
/* 如果使用像素单位，将会迫使主内容向下移动，但我知道这不是理想的。 */
flex-direction: row;
border: 1px solid red;
/* 我从其他答案中尝试过的方法 */
/* flex: 1 1 auto; */
/* height: calc(100% - var(--header-height)); */
position: relative;
}
/* 其他样式不变 */
这是根据您提供的代码进行的翻译。如果有其他问题，请留言。
英文:
You can use flex diplay on body instead of using instead of fixed on header and footer and make the body display flex with column direction, then for main-content all you need is to set flex: 1 and remove padding top, flex: 1 will make sure that main-content take any remaining space in the parent. Set the body height to height: 100vh and overflow: hidden, for man-content, set overflow: auto.
Additionally, To make sidebar sticky when scrolling, I added position: relative; to main-content and position: sticky; to the sidebar.
To force header and footer heights and prevent them to be squeezed by the flex position, use min-height instead of height as I modified in the code.
Try to view the run code in full page, if you have any further questions, comment below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
:root {
--header-height: 72px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
height: 100vh;
overflow:hidden;
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
display: flex;
overflow-y: auto;
/* If I use px units it will force the main content to go down but I know that is not ideal. */
flex-direction: row;
border: 1px solid red;
/* Things I have tried from other answers*/
/* flex: 1 1 auto; */
/* height: calc(100% - var(--header-height)); */
position: relative;
}
.content {
padding: 32px;
display: flex;
flex-wrap: wrap;
}
.card {
width: 300px;
padding: 16px;
margin: 16px;
}
.header {
display: flex;
align-items: center;
min-height: var(--header-height);
background: darkmagenta;
color: white;
padding: 0px 15px;
}
h1 {
font-weight: 1000;
}
.footer {
min-height: var(--header-height);
background: #eee;
color: darkmagenta;
width: 100%;
height: 5%;
display: flex;
justify-content: center;
align-items: center;
}
.sidebar {
width: 300px;
background: royalblue;
box-sizing: border-box;
padding: 16px;
position: sticky;
top: 0;
white-space: nowrap;
min-height: 250px;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
border-radius: 4px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
font-size: 24px;
}
li {
margin-bottom: 16px;
}
<!-- language: lang-html -->
<body>
<div class="header">
<h1>
MY AWESOME WEBSITE
</h1>
</div>
<div class="main-content">
<div class="sidebar">
<ul>
<li><a href="#">⭐ - link one</a></li>
<li><a href="#">🦸🏽♂️ - link two</a></li>
<li><a href="#">🖌️ - link three</a></li>
<li><a href="#">👌🏽 - link four</a></li>
</ul>
</div>
<div class="content">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.
</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
</body>
</html>
<!-- end snippet -->
答案2
得分: 1
:root{
--header-height: 72px;
}
body {
height: 100vh;/* add this */
}
.main-content{
height: calc(100% - var(--header-height) - 5%); /* add this */
}
英文:
Everything you have done is okay, just change the body height to 100vh and main-content height calculation height: calc(100% - var(--header-height) - 5%);
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
:root{
--header-height: 72px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
height: 100vh;/* add this */
}
.main-content{
display: flex;
height: calc(100% - var(--header-height) - 5%); /* add this */
padding-top: var(--header-height);
flex-direction: row;
border: 1px solid red;
}
.sidebar{
flex-shrink: 0;
}
.content {
padding: 32px;
display: flex;
flex-wrap: wrap;
}
.card {
width: 300px;
padding: 16px;
margin: 16px;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
height: var(--header-height);
background: darkmagenta;
color: white;
padding: 0px 15px;
}
h1 {
font-weight: 1000;
}
.footer {
height: var(--header-height);
background: #eee;
color: darkmagenta;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 5%;
display: flex;
justify-content: center;
align-items: center;
}
.sidebar {
width: 300px;
background: royalblue;
box-sizing: border-box;
padding: 16px;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
border-radius: 4px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
font-size: 24px;
}
li{
margin-bottom: 16px;
}
<!-- language: lang-html -->
<div class="header">
<h1>
MY AWESOME WEBSITE
</h1>
</div>
<div class="main-content">
<div class="sidebar">
<ul>
<li><a href="#">⭐ - link one</a></li>
<li><a href="#">🦸🏽♂️ - link two</a></li>
<li><a href="#">🖌️ - link three</a></li>
<li><a href="#">👌🏽 - link four</a></li>
</ul>
</div>
<div class="content">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem
dignissimos
maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit
corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam
maiores
velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi
odit
ea.
</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
eligendi
aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
esse
autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
amet
adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
minima
laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
eligendi
aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
esse
autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
amet
adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
minima
laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论