Question

我使用Users of处理非常复杂的 DASHBOARD 。我发现.*与bootstrap-4存在问题。实际上，这不是<pre>和Flexbox问题flexbox容器问题。我的<pre>结构应该是这样的。

table

html和css片段

＆＃13;

html

＆＃13;

table-container
    flex-container
        pre-container

＆＃13;

如果我删除或替换.container-example{ background-color: rgba(0, 0, 255, 0.30); display: table; height: 100%; left: 0; overflow-x: hidden; overflow-y: auto; padding-bottom: 45px; position: absolute; top: 0; width: 100%; } .code-example-body{ -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .code-example{ -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .normal-div{ align-items: flex-start; display: flex; flex: 0 0 100%; flex-direction: column; justify-content: flex-start; } .long-div{ background-color: #f6f6f6; height: 1000px; padding: 30px; width: 100%; } .footer{ background-color: rgba(0, 0, 0, 0.75); bottom: 0; color: #ffffff; left: 0; padding: 10px 15px; position: absolute; text-align: center; width: 100%; }表单<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://v4-alpha.getbootstrap.com/assets/css/docs.min.css" rel="stylesheet"/> <div class="container-example"> <div class="code-example-body"> <div class="normal-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div class="code-example"> <figure class="highlight"> <pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span> <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> <span class="nt"><head></span> <span class="c"></span> <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span> <span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span class="nt">></span> <span class="c"></span> <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="nt"><h1></span>Hello, world!<span class="nt"></h1></span> <span class="c"></span> <span class="nt"><script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.1.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span> <span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span> <span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span> <span class="nt"></body></span> <span class="nt"></html></span></code></pre> </figure> </div> </div> <div class="long-div"></div> <div class="footer"> I'm footer. Please set me bottom of the browser or end of the document. </div> </div>，那么它运行良好。此问题还有另一个解决方案。如果我在display: table;中设置固定宽度，那么它正在工作。

.container-example

注意：我无法从父元素中删除或替换.code-example，但我需要.code-example{ flex: 0 0 400px; max-width: 400px; } display: table;未修复100%。

我的底部有绝对的页脚。此页脚始终设置为文档的末尾或浏览器的末尾。页脚width应为width。这是因为我无法移除或替换position。

仅absolute的解决方案水平滚动条。

Answer 1

我找到了解决方案。只需要fixed table mode。

.container-example{ table-layout: fixed; }

工作代码段

.container-example{
  background-color: rgba(0, 0, 255, 0.30);
  display: table;
  height: 100%;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 45px;
  position: absolute;
  table-layout: fixed;
  top: 0;
  width: 100%;
}
.code-example-body{
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.code-example{
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -moz-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
.normal-div{
  align-items: flex-start;
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  justify-content: flex-start;
}
.long-div{
  background-color: #f6f6f6;
  height: 1000px;
  padding: 30px;
  width: 100%;
}
.footer{
  background-color: rgba(0, 0, 0, 0.75);
  bottom: 0;
  color: #ffffff;
  left: 0;
  padding: 10px 15px;
  position: absolute;
  text-align: center;
  width: 100%;
}

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://v4-alpha.getbootstrap.com/assets/css/docs.min.css" rel="stylesheet"/>
<div class="container-example">
    <div class="code-example-body">
        <div class="normal-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        <div class="code-example">
            <figure class="highlight">
                <pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="c">&lt;!-- Required meta tags --&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Bootstrap CSS --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;h1&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span>
<span class="c">&lt;!-- jQuery first, then Tether, then Bootstrap JS. --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.1.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre>
            </figure>
        </div>
    </div>
  <div class="long-div"></div>
  <div class="footer">
        I'm footer. Please set me bottom of the browser or end of the document.
    </div>
</div>

表容器内的flexbox容器，PRE标签和管理溢出

1 个答案: