在引导程序容器中使用flexbox让我在错误位置滚动条

我希望我的页面具有flexbox布局，其中页眉和页脚留在相同的位置，但内容填充屏幕的其余部分。但是，由于我的页面设置的方式，我需要在代码的主要内容区域中使用容器。这给我一个滚动条的问题，它不在页面的一边，而是位于容器的边缘。在引导程序容器中使用flexbox让我在错误位置滚动条

任何人都可以帮我把滚动条带到它应该在的位置，或者告诉我为什么我不能像我这样做，并给我一个可行的解决方法？

这里是不引导原来的工作示例：

https://jsfiddle.net/SuperMelons/n2s9xrt0/

HTML：

<div class="mybox"> 
    <div class="myrow myheader"> 
    <p><b>header</b> 
     <br /> 
     <br />(sized to content)</p> 
    </div> 
    <div class="myrow mycontent"> 
    <p> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
    </p> 
    </div> 
    <div class="myrow myfooter"> 
    <p><b>footer</b> (fixed height)</p> 
    </div> 
</div>

CSS：

html, 
body { 
    height: 100%; 
    margin: 0 
} 

.mybox { 
    display: flex; 
    flex-flow: column; 
    height: 100%; 
} 

.mybox .myrow { 
    border: 1px dotted grey; 
} 

.mybox .myrow.myheader { 
    flex: 0 1 auto; 
} 

.mybox .myrow.mycontent { 
    display: flex; 
    flex-flow: column; 
    flex: 1 1 auto; 
    overflow-y: auto; 
} 

.mybox .myrow.myfooter { 
    flex: 0 1 40px; 
}

这里是不是因为工作的例子自举容器：

https://jsfiddle.net/SuperMelons/2L5cbt8m/2/

HTML与引导：

<div class="mybox"> 
    <div class="myrow myheader"> 
    <p><b>header</b> 
     <br /> 
     <br />(sized to content)</p> 
    </div> 
    <div class="myrow mycontent container"> 
    <p> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
     content<br> 
    </p> 
    </div> 
    <div class="myrow myfooter"> 
    <p><b>footer</b> (fixed height)</p> 
    </div> 
</div>

来源

2017-06-28 Jacob Michaelis

很肯定这是不可能的CSS。这个浏览器在溢出的地方添加了滚动条。由于该页面不会溢出，因此您不会在页面上获得滚动条。 JS可能会做点什么。 –

一个简单的解决方法是在你的mybox规则中设置'width：100％'，这也避免了固定宽度的_bootstraps_媒体查询适用于某些屏幕尺寸https://jsfiddle.net/2L5cbt8m/6/ – LGSon

你想somethink这样吗？

https://jsfiddle.net/uykf3Lp8/2/

<div class="myrow mycontent"> 
    <div class="container"> 
     content 
    </div> 
</div>

来源

2017-06-28 15:48:24

是的，作品真的很好，谢谢。 –

只能用代码回答并且不解释你做了什么以及它为什么起作用，这不是一个好的答案。 ...并且不需要您添加的额外包装，因为您可以在我的答案中看到 – LGSon

在引导程序容器中使用flexbox让我在错误位置滚动条

回答

相关问题