如何滚动一个位置：绝对与bowser滚动？

我有三个div层。第一层是具有指定高度的背景。第二层是内容类的透明div。第三层是内容。我想删除.content类的滚动条，并且想要使用浏览器滚动滚动文本。我该怎么做？如何滚动一个位置：绝对与bowser滚动？

.container{ 
 
    background-color:black; 
 
    height:400px; 
 
    wdith:100%; 
 
} 
 
.backtransparent{ 
 
    background-color: gray; 
 
    width:250px; 
 
    height:100%; 
 
    margin: 0 auto; 
 
} 
 
.content{ 
 
    width:200px; 
 
    margin: 0 auto; 
 
    background-color:white; 
 
    position:absolute; 
 
    overflow:auto; 
 
    height:400px; 
 
    left: 0; 
 
    right:0; 
 
}

<div class="container"> 
 
    <div class="backtransparent"> 
 
    <div class="content"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odddio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur... 
 
    </div> 
 
    </div> 
 
</div>

下面是完整的例子：https://jsfiddle.net/yrp4pmmc/2/

来源

2016-11-24 test123456

如果我得到它的权利，你不能，除非你的浏览器窗口具有高度小于'400px'它不会显示滚动条。 –

@JordiNebot高度是预定义的。我只想滚动浏览器滚动的文本（而不是像这样单独滚动）。 – test123456

如果你的容器的高度需要固定在400px并且你的窗口更高，你不能使用浏览器滚动来获得它，但@ sTx的答案似乎是一个相当不错的答案...... –

你的意思是like this?

.container{ 
background-color: black; 
height: 400px; 
width: 100%; 
overflow: auto; 
} 
.content{ 
width: 240px; 
margin: 0 auto; 
background-color: white; 
left: 0; 
right: 0; 
border-left: 20px solid grey; 
border-right: 20px solid grey; 
}

来源

2016-11-24 11:07:45 sTx

很好地去除无用的元素，也不需要左右CSS：https://jsfiddle.net/Kyle_/yrp4pmmc/6/ – Kyle

是的。 thx :) – test123456

是的，我忘了他们，没有必要左或右，因为我已经删除了绝对定位 – sTx

除非我误解你的问题，你所要做的就是删除您绝对定位，使父母div 100％的高度。

移除div上的指定高度可确保它们占用内容的大小，因为默认情况下是div。然后，当您限制.content元素的宽度并移除其滚动功能时，.container必须占据其子元素的整个高度。

.container{ 
    background-color:black; 
    height: 100%; 
    width:100%; 
} 

.backtransparent{ 
    background-color: gray; 
    width:250px; 
    height:100%; 
    margin: 0 auto; 
} 

.content{ 
    width:200px; 
    margin: 0 auto; 
    background-color:white; 
    overflow:auto; 
    height: auto; 
}

https://jsfiddle.net/Kyle_/yrp4pmmc/3/

来源

2016-11-24 11:00:23 Kyle

所以''height：400px'。容器“完全是任意的？ –

似乎是这样。我可能误解了，但为了获得“浏览器滚动”，元素必须包装他们的孩子，并且没有应用特定的高度。 – Kyle

如何滚动一个位置：绝对与bowser滚动？

回答

相关问题