0
非常に複雑な作業をしていますダッシュボードbootstrap-4を使用しています。 <pre>にFlexboxという問題が見つかりました。実際にはこれはflexboxではなく、<pre>の問題はtableコンテナ発行です。私のhtml構造はこのようにすべきです。私は削除するか、それがうまく働いてdisplay: table;フォーム.container-exampleを交換する場合フレックスボックスコンテナ、テーブルコンテナ内、PREタグとオーバーフロー管理
table-container flex-container pre-container
スニペット。また、この問題には別の解決策があります。私がHTMLとCSSは
.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"><!-- Required meta tags --></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"><!-- Bootstrap CSS --></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"><!-- jQuery first, then Tether, then Bootstrap JS. --></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>
.code-exampleに固定幅を設定している場合、それは動作しています。
.code-example{ flex: 0 0 400px; max-width: 400px; }
注：私はまた、私は
100%widthがwidthが固定されていない必要がある親要素からdisplay: table;を削除または交換することはできません。
私は底に絶対のフッターを持っています。このフッターは、常にドキュメントの終わりまたはブラウザの終わりに設定されます。フッターpositionはabsoluteである必要があります。私はdisplay: table;を取り除いたり交換したりすることはできません。
preのソリューション水平スクロールバーのみ。