我在一个引导容器中的pre和code标签中有一些代码,我想要水平滚动.这通常工作正常,直到我添加一个flexBox到我的页面的身体,以完成一个粘稠的页脚.之后,当页面较窄时(例如用于移动查看),代码不再水平滚动.
这是我的代码(请注意,缩小窗口时,代码的水平滚动条将消失)：
html,body {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
code {
max-height: 200px;
background-color: #eeeeee;
word-break: normal !important;
word-wrap: normal !important;
white-space: pre !important;
}
.flexer {
flex: 1;
}
footer {
background-color: #CCC;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12 docs">
<p>Some sample code</p>
<pre><code>Loading mirror speeds from cached hostfilebase: mirrors.arpnetworks.com * centosplus: mirrors.arpnetworks.com* extras:mirrors.arpnetworks.com*rpmforge: mirror.hmc.eduupdates: mirrors.arpnetworks.comExcluding Packages in global exclude list</code></pre>
</div>
</div>
</div>
<div class="flexer"></div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
footer
</div>
</div>
</div>
</footer>
http://jsfiddle.net/nturor46/1/
任何想法如何使用flexBox粘贴页脚,同时仍然保持滚动的pre / code？
解决方法
一个简单的
.container { width:100%; }
正确调整网站大小.但是,Chrome不会让您实际使用滚动条.这是由于它溢出其所有容器的尺寸(除了BODY之外).
因此,我们必须告诉浏览器正确识别前节点：
.container {
max-width: 100%;
}
pre {
position: relative;
}
这告诉Chrome再次正确处理鼠标事件并修复布局
请注意,节点之间的边缘底部在溢出的国家/地区丢失,这可能会导致您的布局看起来很奇怪.在最终版本中使用了max-width,以确保它不会覆盖在引导中进行的固定宽度语句
PS：在当前的Chrome和Firefox http://jsfiddle.net/nturor46/32/中进行测试
