css auto的margin不应该通过填充可用的空白来将元素推到最远吗？

tzdcorbm 于 2023-02-10 发布在其他

关注(0)|答案(3)|浏览(113)

Image of my current layout
我正在学习flexbox，我正在尝试创建一个常见的布局，可以在 Jmeter 板类模板中找到，这类模板包含左侧的主导航菜单（侧边栏），顶部导航菜单用于用户通知或网站主题等内容，顶部导航菜单下方是主要内容区域。
我所面临的问题是，我的导航列表项“B”（它周围有一个白色边框，以供查看）由于某种未知原因没有被推到“紫色”div的底部。
我将nav和ul元素的高度都设置为100%，这样它们就可以和主体一样占据垂直空间，所以根据我的理解，添加一个margin-top: auto实际上应该会将B一直推到底部。
我的理解是否有根本性的问题？我是否在正确实施这种主题的正确轨道上？
感谢您抽出时间与我们分享您的知识！

* {
  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;
}

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

css

来源：https://stackoverflow.com/questions/75381465/shouldnt-a-margin-of-auto-push-an-element-to-the-farthest-it-can-go-by-filling

3条答案

按热度按时间

flvlnr441#

我设法通过向ul元素添加以下CSS属性来将B推到底部：

display: flex;
flex-direction: column;

我仍然不确定为什么需要这样做。

赞(0）回复(0）举报 2023-02-10

qlfbtfca2#

CSS代码正确，但应用到了错误的元素。ul应获取flex box属性，以便所有li项显示为列。请将flex属性应用到ul。

* {
  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;
}

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

赞(0）回复(0）举报 2023-02-10

lymnna713#

如果要使用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;
}

按网格：

ul {
  display: grid;
}

nav ul li:last-child {
  align-self: flex-end;
}

赞(0）回复(0）举报 2023-02-10

我来回答

css auto的margin不应该通过填充可用的空白来将元素推到最远吗？

3条答案

相关问题

热门标签

最新问答