Question

我使用CSS来设计风格。应用此样式后，请向左移动，但我希望它位于页面右侧。我想要一个与容器有关的高度。也就是说，无论容器的高度是多少，我都希望它的底部边距触及页脚的顶部。

风格：

aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
position:absolute;
overflow:auto;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
}

Answer 1

删除position: absolute;。如果您想保留position: absolute;，可以添加right: 0;。

＆＃13;

html,body{
    height: 100%;
}
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
overflow:auto;
height: 100%;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
}

＆＃13;

<aside>I'm at the right side</aside>

＆＃13;

Answer 2

正如古斯塔夫所说，你必须删除这个位置：绝对的＆＃39;切换侧面。要定义高度，元素的所有父元素都需要具有定义的高度，因此children元素将具有渲染自己高度的引用，如下所示：

＆＃13;

html, body{ 
   height: 100%;
}

aside {
   width:260px;
   float:right;
   border-left:1px dashed #aaa;
   padding-right:15px;
   padding-left:15px;
   text-align:center;
   overflow:auto;
   background-color:blue;
   border-radius:10px;
   box-shadow:0px 0px 7px rgba(0,0,0,0.5);
   height: 100%;
}

＆＃13;

<html>
<head></head>
<body>
    <aside>I'm at the right side</aside>
</body>
</html>

＆＃13;

如何解决浮动问题

2 个答案: