当前位置： 文江博客话题详情

使用 CSS 强制侧边栏高度 100%（带有粘性底部图像）？

发布于 2024-07-18 05:13:13 字数 3432 浏览 4 评论 0原文

我已经用头撞墙好几个小时了，试图找出这个问题，并认为这一定是我遗漏的一些小东西。 我在网上搜索过，但我发现似乎没有任何效果。 HTML 是：

<body>
  <div id="header">
    <div id="bannerleft">
    </div>

    <div id="bannerright">
      <div id="WebLinks">
        <span>Web Links:</span>
        <ul>
          <li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
          <li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
          <li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="Sidebar">
    <div id="SidebarBottom">
    </div>
  </div>
  <div id="NavigationContainer">
    <ul id="Navigation">
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
    </ul>
  </div>
  <div id="Main">
    <!-- content -->
  </div>
</body>

我的完整 CSS 是：

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Calibri, Sans-Serif;
  height: 100%;
}

#header {
  width: 100%;
  z-index: 1;
  height: 340px;
  background-image: url("../../Content/images/bannercenter.gif");
  background-repeat: repeat-x;
}

#header #bannerleft {
  float: left;
  background-image: url("../../Content/images/bannerleft.gif");
  background-repeat: no-repeat;
  height: 340px;
  width: 439px;
  z-index: 2;
}

#bannerright {
  float: right;
  background-image: url("../../Content/images/bannerright.gif");
  background-repeat: no-repeat;
  width: 382px;
  height: 340px;
  background-color: White;
  z-index: 2;
}

#Sidebar {
  width: 180px;
  background: url("../../Content/images/Sidebar.png") repeat-y;
  z-index: 2;
  height: 100%;
  position: absolute;
}

#SidebarBottom {
  margin-left: 33px;
  height: 100%;
  background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
}

#NavigationContainer {
  position: absolute;
  top: 350px;
  width: 100%;
  background-color: #bbc4c3;
  height: 29px;
  z-index: 1;
  left: 0px;
}

#Navigation {
  margin-left: 190px;
  font-family: Calibri, Sans-Serif;
}

#Navigation li {
  float: left;
  list-style: none;
  padding-right: 3%;
  padding-top: 6px;
  font-size: 100%;
}

#Navigation a:link, a:active, a:visited {
  color: #012235;
  text-decoration: none;
  font-weight: 500;
}

#Navigation a:hover {
  color: White;
}

#WebLinks {
  float: right;
  color: #00324b;
  margin-top: 50px;
  width: 375px;
}

#WebLinks span {
  float: left;
  margin-right: 7px;
  margin-left: 21px;
  font-size: 10pt;
  margin-top: 8px;
  font-family: Helvetica;
}

#WebLinks ul li {
  float: left;
  padding-right: 7px;
  list-style: none;
}

#WebLinks ul li a {
  text-decoration: none;
  font-size: 8pt;
  color: #00324b;
  font-weight: normal;
}

#WebLinks ul li a img {
  border-style: none;
}

#WebLinks ul li a:hover {
  color: #bcc5c4;
}

我希望侧边栏随着页面内容的高度而拉伸，并将侧边栏底部图像始终保留在侧边栏的底部。

原文

I've been banging my head against the wall for hours trying to figure out this issue and think it must be something small I'm missing. I've searched online, but nothing I have found seems to work. The HTML is:

<body>
  <div id="header">
    <div id="bannerleft">
    </div>

    <div id="bannerright">
      <div id="WebLinks">
        <span>Web Links:</span>
        <ul>
          <li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
          <li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
          <li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="Sidebar">
    <div id="SidebarBottom">
    </div>
  </div>
  <div id="NavigationContainer">
    <ul id="Navigation">
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
    </ul>
  </div>
  <div id="Main">
    <!-- content -->
  </div>
</body>

My full CSS is:

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Calibri, Sans-Serif;
  height: 100%;
}

#header {
  width: 100%;
  z-index: 1;
  height: 340px;
  background-image: url("../../Content/images/bannercenter.gif");
  background-repeat: repeat-x;
}

#header #bannerleft {
  float: left;
  background-image: url("../../Content/images/bannerleft.gif");
  background-repeat: no-repeat;
  height: 340px;
  width: 439px;
  z-index: 2;
}

#bannerright {
  float: right;
  background-image: url("../../Content/images/bannerright.gif");
  background-repeat: no-repeat;
  width: 382px;
  height: 340px;
  background-color: White;
  z-index: 2;
}

#Sidebar {
  width: 180px;
  background: url("../../Content/images/Sidebar.png") repeat-y;
  z-index: 2;
  height: 100%;
  position: absolute;
}

#SidebarBottom {
  margin-left: 33px;
  height: 100%;
  background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
}

#NavigationContainer {
  position: absolute;
  top: 350px;
  width: 100%;
  background-color: #bbc4c3;
  height: 29px;
  z-index: 1;
  left: 0px;
}

#Navigation {
  margin-left: 190px;
  font-family: Calibri, Sans-Serif;
}

#Navigation li {
  float: left;
  list-style: none;
  padding-right: 3%;
  padding-top: 6px;
  font-size: 100%;
}

#Navigation a:link, a:active, a:visited {
  color: #012235;
  text-decoration: none;
  font-weight: 500;
}

#Navigation a:hover {
  color: White;
}

#WebLinks {
  float: right;
  color: #00324b;
  margin-top: 50px;
  width: 375px;
}

#WebLinks span {
  float: left;
  margin-right: 7px;
  margin-left: 21px;
  font-size: 10pt;
  margin-top: 8px;
  font-family: Helvetica;
}

#WebLinks ul li {
  float: left;
  padding-right: 7px;
  list-style: none;
}

#WebLinks ul li a {
  text-decoration: none;
  font-size: 8pt;
  color: #00324b;
  font-weight: normal;
}

#WebLinks ul li a img {
  border-style: none;
}

#WebLinks ul li a:hover {
  color: #bcc5c4;
}

I'd like the sidebar to stretch in height with the content of my page and leave the sidebar bottom image always at the bottom of the sidebar.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（17）

国粹 2024-07-25 05:13:13

这对我有用

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
}

This worked for me

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
}
回复 原文
毁虫ゝ 2024-07-25 05:13:13

在 CSS 的 Flexbox 变得更加主流之前，您始终可以绝对定位侧边栏，将其与顶部和底部保持零像素距离，然后在主容器上设置边距以进行补偿。

JSFiddle

http://jsfiddle.net/QDCGv/

HTML

<section class="sidebar">I'm a sidebar.</section>

<section class="main">I'm the main section.</section>

CSS

section.sidebar {
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: green;
}

section.main { margin-left: 250px; }

注意：这是一种非常简单的方法，但您会发现 bottom 并不意味着“页面底部”，而是“窗口底部”。 如果您的主要内容向下滚动，侧边栏可能会突然结束。

Until CSS's flexbox becomes more mainstream, you can always just absolutely position the sidebar, sticking it zero pixels away from the top and bottom, then set a margin on your main container to compensate.

JSFiddle

http://jsfiddle.net/QDCGv/

HTML

<section class="sidebar">I'm a sidebar.</section>

<section class="main">I'm the main section.</section>

CSS

section.sidebar {
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: green;
}

section.main { margin-left: 250px; }

Note: This is an über simple way to do this but you'll find bottom does not mean "bottom of page," but "bottom of window." The sidebar will probably abrubtly end if your main content scrolls down.

回复 原文
(り薆情海 2024-07-25 05:13:13

更新：由于这个答案仍然得到了赞成和反对的投票，并且在撰写本文时已有八年了：现在可能有更好的技术。 原始答案如下。

显然，您正在寻找 假列 技术:-)

通过高度属性的计算方式，您无法在具有自动高度的内容内设置 height: 100% 。

UPDATE: As this answer is still getting votes both up and down, and is at the time of writing eight years old: There are probably better techniques out there now. Original answer follows below.

Clearly you are looking for the Faux columns technique :-)

By how the height-property is calculated, you can't set height: 100% inside something that has auto-height.

回复 原文
孤者何惧 2024-07-25 05:13:13

我会使用 css 表格 来实现 100% 的侧边栏高度。

基本思想是将侧边栏和主 div 包装在一个容器中。

给容器一个 display:table

并给 2 个子 div（侧边栏和主）一个 display: table-cell

像这样......

#container {
display: table;
}
#main {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
}

看看这个 实时演示，我使用上述技术修改了您的初始标记（我有为不同的 div 使用背景颜色，以便您可以看到哪些是哪些）

I would use css tables to achieve a 100% sidebar height.

The basic idea is to wrap the sidebar and main divs in a container.

Give the container a display:table

And give the 2 child divs (sidebar and main) a display: table-cell

Like so..

#container {
display: table;
}
#main {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
}

Take a look at this LIVE DEMO where I have modified your initial markup using the above technique (I have used background colors for the different divs so that you can see which ones are which)

回复 原文
寻找我们的幸福 2024-07-25 05:13:13

Flexbox (http://caniuse.com/#feat=flexbox)

首先将您想要的列包裹起来一个 div 或节，例如：

<div class="content">
    <div class="main"></div>
    <div class="sidebar"></div>
</div>

然后添加以下 CSS：

.content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Flexbox (http://caniuse.com/#feat=flexbox)

First wrap the columns you want in a div or section, ex:

<div class="content">
    <div class="main"></div>
    <div class="sidebar"></div>
</div>

Then add the following CSS:

.content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
回复 原文
枉心 2024-07-25 05:13:13

除了@montrealmike 的回答之外，我可以添加我的改编吗？

我这样做了：

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
}

我做了“101%”的事情来满足（极其罕见）的可能性，即有人可能在高度超过 5000 像素的大屏幕上查看该网站！

不过，蒙特利尔迈克，答案很好。 它对我来说非常有效。

Further to @montrealmike 's answer, can I just add my adaptation?

I did this:

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
}

I did the "101%" thing to cater for the (ultra rare) possibility that somebody may be viewing the site on a huge screen with a height more than 5000px!

Great answer though, montrealmike. It worked perfectly for me.

回复 原文
万劫不复 2024-07-25 05:13:13

我在不同的项目中多次遇到这个问题，但我找到了适合我的解决方案。 您必须使用四个 div 标签 - 一个包含侧边栏、主要内容和页脚。

首先，在样式表中设置元素的样式：

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

您可以根据需要编辑不同的元素，只需确保不要更改页脚属性“clear:both” - 保留这一点非常重要。

然后，只需设置您的网站像这样的页面：

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

我在 http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container。 请让我知道，如果你有任何问题。 希望这可以帮助！

I have run into this issue several times on different projects, but I have found a solution that works for me. You have to use four div tags - one that contains the sidebar, the main content, and a footer.

First, style the elements in your stylesheet:

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.

Then, simply set up your web page like this:

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

I wrote a more in-depth blog post about this at http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. Please let me know if you have any questions. Hope this helps!

回复 原文
像你 2024-07-25 05:13:13

也许开箱即用的多列布局爬升正是您所寻找的？

Perhaps Multi-Column Layouts Climb Out of the Box is what you're looking for?

回复 原文
还不是爱你 2024-07-25 05:13:13

我想，今天人们可能会使用 Flexbox 来实现这一点。 请参阅圣杯示例。

i guess, today one would probably use flexbox for this. See the holy grail example.

回复 原文
寒尘 2024-07-25 05:13:13

我和乔恩面临着同样的问题。 TheLibzter 让我走上了正确的道路，但必须保留在侧边栏底部的图像不包括在内。 所以我做了一些调整...

重要提示：

  • 包含侧边栏和内容的 div 的定位（#bodyLayout）。 这应该是相对的。
  • div 的位置必须保留在 sidbar 的底部 (#sidebarBottomDiv)。 这应该是绝对的。
  • 内容的宽度 + 侧边栏的宽度必须等于页面的宽度（#container）

这是 css：

    #container
    {
        margin: auto;
        width: 940px;
    }
    #bodyLayout
    {
        position: relative;
        width: 100%;
        padding: 0;
    }
    #header
    {
        height: 95px;
        background-color: blue;
        color: white;
    }
    #sidebar
    {
        background-color: yellow;
    }
    #sidebarTopDiv
    {
        float: left;
        width: 245px;
        color: black;
    }
    #sidebarBottomDiv
    {
        position: absolute;
        float: left;
        bottom: 0;
        width: 245px;
        height: 100px;
        background-color: green;
        color: white;
    }
    #content
    {
        float: right;
        min-height: 250px;
        width: 695px;
        background-color: White;
    }
    #footer
    {
        width: 940px;
        height: 75px;
        background-color: red;
        color: white;
    }
    .clear
    {
        clear: both;
    }

这是 html：

<div id="container">
    <div id="header">
        This is your header!
    </div>
    <div id="bodyLayout">
        <div id="sidebar">
            <div id="sidebarTopDiv">
                This is your sidebar!                   
            </div>
            <div id="content">                  
            This is your content!<br />
            The minimum height of the content is set to 250px so the div at the bottom of
            the sidebar will not overlap the top part of the sidebar.
            </div>
            <div id="sidebarBottomDiv">
                This is the div that will stay at the bottom of your footer!
            </div>
            <div class="clear" />
        </div>
    </div>
</div>
<div id="footer">
    This is your footer!
</div>

I was facing the same problem as Jon. TheLibzter put me on the right track, but the image that has to stay at the bottom of the sidebar was not included. So I made some adjustments...

Important:

  • Positioning of the div which contains the sidebar and the content (#bodyLayout). This should be relative.
  • Positioning of the div that has to stay at the bottom of the sidbar (#sidebarBottomDiv). This should be absolute.
  • The width of the content + the width of the sidebar must be equal to the width of the page (#container)

Here's the css:

    #container
    {
        margin: auto;
        width: 940px;
    }
    #bodyLayout
    {
        position: relative;
        width: 100%;
        padding: 0;
    }
    #header
    {
        height: 95px;
        background-color: blue;
        color: white;
    }
    #sidebar
    {
        background-color: yellow;
    }
    #sidebarTopDiv
    {
        float: left;
        width: 245px;
        color: black;
    }
    #sidebarBottomDiv
    {
        position: absolute;
        float: left;
        bottom: 0;
        width: 245px;
        height: 100px;
        background-color: green;
        color: white;
    }
    #content
    {
        float: right;
        min-height: 250px;
        width: 695px;
        background-color: White;
    }
    #footer
    {
        width: 940px;
        height: 75px;
        background-color: red;
        color: white;
    }
    .clear
    {
        clear: both;
    }

And here's the html:

<div id="container">
    <div id="header">
        This is your header!
    </div>
    <div id="bodyLayout">
        <div id="sidebar">
            <div id="sidebarTopDiv">
                This is your sidebar!                   
            </div>
            <div id="content">                  
            This is your content!<br />
            The minimum height of the content is set to 250px so the div at the bottom of
            the sidebar will not overlap the top part of the sidebar.
            </div>
            <div id="sidebarBottomDiv">
                This is the div that will stay at the bottom of your footer!
            </div>
            <div class="clear" />
        </div>
    </div>
</div>
<div id="footer">
    This is your footer!
</div>
回复 原文
如梦 2024-07-25 05:13:13

我意识到这是一篇旧帖子，但我正在尝试为我的网站找到一个侧边栏。
这行得通吗？

#sidebar-background
{
    position:fixed;
    width:250px;
    top:0;
    bottom:0;
    background-color:orange;
}

#content-background
{
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    left:250px;
    background-color:pink;
}

#sidebar
{
    float:left;
    width:250px;
}

#content
{
    float:left;
    width:600px;
}

<div id="sidebar-background"></div>
<div id="content-background"></div>

<div id="sidebar">Sidebar stuff here</div>
<div id="content">Stuff in here</div>

I realise this is an old post but I was trying to work something out for my site to have a sidebar.
Would this work?

#sidebar-background
{
    position:fixed;
    width:250px;
    top:0;
    bottom:0;
    background-color:orange;
}

#content-background
{
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    left:250px;
    background-color:pink;
}

#sidebar
{
    float:left;
    width:250px;
}

#content
{
    float:left;
    width:600px;
}

<div id="sidebar-background"></div>
<div id="content-background"></div>

<div id="sidebar">Sidebar stuff here</div>
<div id="content">Stuff in here</div>
回复 原文
↘人皮目录ツ 2024-07-25 05:13:13

我认为您的解决方案是将内容容器和侧边栏包装在包含 div 的父级中。 将侧边栏浮动到左侧并为其提供背景图像。 为内容容器创建至少与侧边栏宽度相同的宽边距。 添加清除浮动黑客以使一切正常。

I think your solution would be to wrap your content container and your sidebar in a parent containing div. Float your sidebar to the left and give it the background image. Create a wide margin at least the width of your sidebar for your content container. Add clearing a float hack to make it all work.

回复 原文
不乱于心 2024-07-25 05:13:13

如果您使用固定宽度侧边栏，请使用主体背景，并提供与侧边栏相同宽度的图像。 还在你的CSS代码中放入background-repeat:repeat-y。

use body background if you are using fixed width sidebar give the same width image as your side bar. also put background-repeat:repeat-y in your css codes.

回复 原文
旧城空念 2024-07-25 05:13:13

侧边栏的绝对位置、顶部：0 和底部：0 以及包装器（或容器）的相对位置，包含所有元素，就完成了！

Position absolute, top:0 and bottom:0 for the sidebar and position relative for the wrapper (or container) witch content all the elements and it's done !

回复 原文
究竟谁懂我的在乎 2024-07-25 05:13:13

尝试这个。 它迫使导航栏随着内容的添加而增长，并保持主要区域居中。

   <html>
        <head>
            <style>
                    section.sidebar {
          width: 250px;
          min-height:100vh;
          position: sticky;
          top: 0;
          bottom: 0;
          background-color: green;
        }

        section.main { position:sticky; top:0;bottom:0;background-color: red; margin-left: 250px;min-height:100vh; }
            </style>
            <script lang="javascript">
            var i = 0;
            function AddOne()
            {
                for(i = 0;i<20;i++)
                {
                var node = document.createElement("LI");
                var textnode = document.createTextNode(' Water ' + i.toString());

                node.appendChild(textnode);
                document.getElementById("list").appendChild(node);
                }


            }
            </script>
        </head>
        <body>
                <section class="sidebar">
                    <button id="add" onclick="AddOne()">Add</button>
                    <ul id="list">
                        <li>bullshit 1</li>
                    </ul>
                </section>
                <section class="main">I'm the main section.</section>
        </body>    
    </html>

Try this. It forces navbar to grow as content added, and keeps main area centered.

   <html>
        <head>
            <style>
                    section.sidebar {
          width: 250px;
          min-height:100vh;
          position: sticky;
          top: 0;
          bottom: 0;
          background-color: green;
        }

        section.main { position:sticky; top:0;bottom:0;background-color: red; margin-left: 250px;min-height:100vh; }
            </style>
            <script lang="javascript">
            var i = 0;
            function AddOne()
            {
                for(i = 0;i<20;i++)
                {
                var node = document.createElement("LI");
                var textnode = document.createTextNode(' Water ' + i.toString());

                node.appendChild(textnode);
                document.getElementById("list").appendChild(node);
                }


            }
            </script>
        </head>
        <body>
                <section class="sidebar">
                    <button id="add" onclick="AddOne()">Add</button>
                    <ul id="list">
                        <li>bullshit 1</li>
                    </ul>
                </section>
                <section class="main">I'm the main section.</section>
        </body>    
    </html>
回复 原文
拥醉 2024-07-25 05:13:13

这是丹尼尔的回答的简化版本

.container {
  display: table;
  height: 260px;
}
#sidebar {
  display: table-cell;
  vertical-align: top;
  background-color:red;
  position:relative;
} 

#sidebarbottom
{
  height:30px;
  position:absolute;
  bottom:0;
}
<div class="container">
  <div id="sidebar">
    SIDEBAR HERE
    <div id="sidebarbottom">
      Sidebar Bottom
    </div>
  </div>
</div>

this is a simplified version of danield's answer

.container {
  display: table;
  height: 260px;
}
#sidebar {
  display: table-cell;
  vertical-align: top;
  background-color:red;
  position:relative;
} 

#sidebarbottom
{
  height:30px;
  position:absolute;
  bottom:0;
}
<div class="container">
  <div id="sidebar">
    SIDEBAR HERE
    <div id="sidebarbottom">
      Sidebar Bottom
    </div>
  </div>
</div>

回复 原文
凉风有信 2024-07-25 05:13:13

解决此问题的一种简单方法是使用固定位置，并将高度设置为 100vh（等于 100%），例如：

  aside {
  background-color: var(--main-color);
  color: white;
  position: fixed;
  width: 60px;
  height: 100vh;
  z-index: 1;
}

one simple way to solve this is to use fixed position with setting the height to 100vh (equal to 100%), an example:

  aside {
  background-color: var(--main-color);
  color: white;
  position: fixed;
  width: 60px;
  height: 100vh;
  z-index: 1;
}
回复 原文
~没有更多了~

关于作者

柒七

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_FjTq5B

文章 0 评论 0

18273202778

文章 0 评论 0

WordPress小学生

文章 0 评论 0

〃温暖了心ぐ

文章 0 评论 0

迷乱花海

文章 0 评论 0

niuniu

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文