英文:
Shouldn't a margin of auto push an element to the farthest it can go by filling in available whitespace?
问题
以下是您要翻译的内容：
"I'm learning flexbox, and I am trying to create a common layout that is found with dashboard kind of templates. These kinds of templates contain a main navigation menu on the left (the sidebar), a top navigation menu for things like user notifications or site themes, and a main content area below the top navigation menu.
The problem that I am facing is that one of my nav list items 'B' (it has a white border around it for visibility) is for some unknown reason not being pushed to the bottom of the 'purple' div.
I set the height to both the nav and the ul elements to have a height of 100% so that they take up as much vertical space as the body does. So from my understanding adding a margin-top: auto should in fact push B all the way to the bottom.
Is there a fundamental issue with my understanding? And am I on the right track to implementing this kind of theme correctly?
Thank you for your time and for sharing your knowledge!"
请注意，这段文本中包含一些英文专业术语和代码，我将其翻译为中文以方便您的理解。
英文:
I'm learning flexbox, and I am trying to create a common layout that is found with dashboard kind of templates. These kinds of templates contain a main navigation menu on the left (the sidebar), a top navigation menu for things like user notifications or site themes, and a main content area below the top navigation menu.
The problem that I am facing is that one of my nav list items "B" (it has a white border around it for visibility) is for some unknown reason not being pushed to the bottom of the "purple" div.
I set the height to both the nav and the ul elements to have a height of 100% so that they take up as much vertical space as the body does. So from my understanding adding a margin-top: auto should in fact push B all the way to the bottom.
Is there a fundamental issue with my understanding? And am I on the right track to implementing this kind of theme correctly?
Thank you for your time and for sharing your knowledge!
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
/* border: 1px solid black; */
}
body {
display: flex;
height: 100vh;
}
#left {
background-color: aqua;
width: 5rem;
}
.column {
display: flex;
flex-direction: column;
}
.top-left,
.top-right {
padding: 1rem;
background-color: aliceblue;
}
nav {
background-color: red;
height: 100%;
}
ul {
background-color: blueviolet;
height: 100%;
}
nav ul li:last-child {
margin-top: auto;
border: 1px solid white;
}
#right {
background-color: orange;
flex-grow: 1;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./project.css" rel="stylesheet">
</head>
<body>
<div id="left" class="column">
<div class="top-left">
Logo
</div>
<nav>
<ul>
<li>A</li>
<li>B</li>
</ul>
</nav>
</div>
<div id="right" class="column">
<div class="top-right">
Top right
</div>
<div>
Content
</div>
</div>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
如果您想使用margin-top:auto，请尝试以下方式：
ul {
background-color: blueviolet;
height: 100%;
display: flex;
flex-direction: column;
}
您还可以尝试其他方式，如：
ul {
display: flex;
}
nav ul li:last-child {
align-self: flex-end;
}
以及使用grid：
ul {
display: grid;
}
nav ul li:last-child {
align-self: flex-end;
}
英文:
If you want use margin-top:auto try the following:
ul {
background-color: blueviolet;
height: 100%;
display: flex;
flex-direction: column;
}
You can also try in other ways like :
ul {
display: flex;
}
nav ul li:last-child {
align-self: flex-end;
}
And by grid :
ul {
display: grid;
}
nav ul li:last-child {
align-self: flex-end;
}
答案2
得分: 0
我通过将以下CSS属性添加到ul元素中，成功将B推到底部：
display: flex;
flex-direction: column;
我仍然不确定为什么需要这样做。
英文:
I managed to get B pushed to the bottom by adding the following CSS properties to the ul element:
display: flex;
flex-direction: column;
I am still not sure why this was needed.
答案3
得分: 0
你的CSS代码是正确的，但你将其应用到了错误的元素上。ul 应该获得弹性盒子属性，以便所有 li 项目显示为列。将弹性属性应用到 ul。
ul {
display: flex;
flex-direction: column;
background-color: blueviolet;
height: 100%;
}
英文:
Your CSS code is correct but you are applying it to wrong element. The ul should get the flex box property so that all li items are displayed as columns. Apply flex property to ul.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
/* border: 1px solid black; */
}
body {
display: flex;
height: 100vh;
}
#left {
background-color: aqua;
width: 5rem;
}
.column {
display: flex;
flex-direction: column;
}
.top-left,
.top-right {
padding: 1rem;
background-color: aliceblue;
}
nav {
background-color: red;
height: 100%;
}
ul {
display: flex;
flex-direction: column;
background-color: blueviolet;
height: 100%;
}
nav ul li:last-child {
margin-top: auto;
border: 1px solid white;
}
#right {
background-color: orange;
flex-grow: 1;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./project.css" rel="stylesheet">
</head>
<body>
<div id="left" class="column">
<div class="top-left">
Logo
</div>
<nav>
<ul>
<li>A</li>
<li>B</li>
</ul>
</nav>
</div>
<div id="right" class="column">
<div class="top-right">
Top right
</div>
<div>
Content
</div>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论