HTML/CSS：固定位置溢出并浮动右边

-1

我有一些div（1个容器，内含1个div和1个sidebar-div），我使用float:right将我的边栏放在右边，然后我添加了一个position: fixed并且，所以它工作，我加了top:0和right:0。我的内容有overflow:auto，但在将position:fixed添加到我的边栏后，它停止工作。HTML/CSS：固定位置溢出并浮动右边

下面是代码：

代码：

#parent { 
 
    margin: 0 auto; 
 
} 
 
#sidebar { 
 
    position: fixed; 
 
    float: right; 
 
    width: 20%; 
 
    top: 0px; 
 
    right: 0px; 
 
} 
 
#content { 
 
    overflow: hidden; 
 
    height: 1000px; 
 
}

<div id="parent"> 
 
    <div id="sidebar"> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
 
    </div> 
 
    <div id="content"> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero 
 
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
</div>

I'm寻找一个简单的解决方案以较少的编码和（如果可能）仅CSS和HTML （如果它不工作，我会使用JavaScript）。

从来就得到了一个小提琴这里：https://jsfiddle.net/qo1crv3x/3/

来源

2016-09-28 VicStudio

为什么你需要'位置：fixed'？ – kukkuz

我想我不明白你在做什么。如果你解决了一些问题，它将保持在一个位置，而不管其他容器会忽略它。你是否试图让左边的div避免将文本溢出到修复div中？ – Keith

你不能浮动一个固定的位置元素......这两个是**互斥**布局方法。 –

#sidebar { 
    display:inline-block; 
    width: 20%; 
    position:fixed; 

} 

#content { 
    display:inline-block; 
    height: 1000px; 
    width:80%; 
}

还有与引导，我曾经就在几天前，可以在这里找到一个方法。 http://www.bootply.com/dMZgESVmaj

来源

2016-09-28 15:07:00 nschwan94

我想这将解决问题乌尔看到FIDLE here

#parent { 
    margin: 0 auto; 
    width: 100%; 
} 

#sidebar { 
    position: fixed; 
    float: right; 
    width: 20%; 
    right: 0; 
} 

#content { 
    float: left; 
    width: 80%; 
}

来源

2016-09-28 15:08:50 Rahul

HTML/CSS：固定位置溢出并浮动右边

回答

相关问题