如何解决浮动问题答案

【问题标题】：how can solve floating issues如何解决浮动问题
【发布时间】：2015-07-05 13:52:52
【问题描述】：

我使用 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);
}

【问题讨论】：

标签： html css

【解决方案1】：

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

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);
}

&lt;aside&gt;I'm at the right side&lt;/aside&gt;

【讨论】：

这不影响旁边的高度！

【解决方案2】：

正如古斯塔夫所说，您必须删除“位置：绝对”才能切换侧面。要定义高度，元素的所有父元素都需要定义高度，因此子元素将有一个引用来呈现您自己的高度，如下所示：

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%;
}

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

【讨论】：

谢谢你。但它不起作用，我真的不知道为什么。将 min-height 设置为 100% 使侧面高度相对于其内容