时间戳

首页 > 解决方案 > 如果 `aside` 不存在，如何适应 `main` html 元素？

javascript - 如果 `aside` 不存在，如何适应 `main` html 元素？

问题描述

我只希望使用CSS-GRID

如果不存在，我想将main元素调整为全宽。aside

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 2rem;
}

div.root {
  height: 100%;
  background-color: blueviolet;
  display: grid;
  grid-template-columns: 200px auto;
}

aside {
  background-color: aquamarine;
}

main {
  background-color: burlywood;
}
<div class="root">
  <aside> aside </aside>
  <main> main </main>
</div>

我在 SOF 上搜索并找到了以下内容，但它没有工作STACKOVERFLOW

我所尝试的是给grid-template-columnsasauto auto并添加宽度，aside但随后main不会拉伸到其全宽。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 2rem;
}

div.root {
  height: 100%;
  background-color: blueviolet;
  display: grid;
  grid-template-columns: auto auto;
}

aside {
  width: 200px;
  background-color: aquamarine;
}

main {
  background-color: burlywood;
}
<div class="root">
  <!-- <aside> aside </aside> -->
  <main> main </main>
</div>

标签： javascripthtmlcss

解决方案

您可以+在 CSS 中使用选择器，但这仅在您aside位于左侧时才有效。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 2rem;
}

div.root {
  height: 100%;
  background-color: blueviolet;
  display: grid;
  grid-template-columns: 200px auto;
}

aside {
  background-color: aquamarine;
  grid-column-start: span 1;
}

main {
  background-color: burlywood;
  grid-column-start: span 2;
}

aside + main {
  grid-column-start: span 1;
}
<div class="root">
  <!--<aside> aside </aside>-->
  <main> main </main>
</div>

<br/><br/>

<div class="root">
  <aside> aside </aside>
  <main> main </main>
</div>

推荐阅读