0
私はショッピングのモックレイアウトを行っています。追加アイテムを追加するとレイアウトが正しくサイズ変更されないようです。しかし、コンテンツが単なるテキストと画像の場合、うまく動作します。誰にでもアイデアはありますか？divは特定のコンテンツでサイズ変更されません
ありがとうございます。
これはうまく動作するテストレイアウトです。 Layout Working
これはオーバーラップするカートレイアウトです。 Layout Not Working
html, body {
margin:0;
padding:0;
\t background:transparent;
}
body:after {
content:"";
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
display:block;
background:url(../background.jpg) no-repeat 50% 50%;
background-size:cover;
\t z-index: -2;
}
#side-bar {
\t position:fixed;
\t float:left;
\t width:25%;
\t min-width:200px;
\t height:100%;
\t min-height:420px;
\t z-index: 3;
\t background-color: rgba(0,0,0,0.9);
\t border-right: 1px solid rgba(255,255,255,0.3);
\t box-shadow: 3px 0 5px rgba(0,0,0,0.5);
}
#content {
\t position: relative;
\t float: right;
\t width: 75%;
\t z-index: 2;
\t background-color: rgba(0,0,0,0.3);
}
#nav-bar {
\t width:100%;
\t min-width:350px;
\t height:50px;
\t font-family: 'Roboto Condensed', sans-serif;
\t font-size:12px;
\t color: white;
}
#nav-bar ul {
\t position:relative;
\t width:100%;
\t height: 100%;
\t min-width:280px;
\t background-color: rgba(0,0,0,0.2);
\t border-bottom:1px solid rgba(0,0,0,0.0);
}
#nav-bar li {
\t display: inline-block;
\t float: right;
\t width: 13%;
\t min-width:60px;
\t line-height: 50px;
\t text-align:center;
\t margin:0;
\t padding: 0;
}
#nav-bar a:link, a:visited {
color: white;
text-decoration: none;
}
#nav-bar a:hover {
color: #FAED26;
\t text-decoration: none;
}
#advert {
\t top:50px;
\t width:100%;
\t height:50px;
\t text-align: center;
\t font-size: 18px;
\t font-family: 'Roboto Condensed', sans-serif;
\t color: #FAED26;
\t background-color: rgba(0,0,0,0.45);
\t border-bottom:1px solid rgba(0,0,0,0.0);
}
#advert h1 {
\t line-height: 40px;
}
#advert h2 {
\t margin-top:-12px;
\t font-size: 11px;
}
#sub-nav {
\t top:100px;
\t width:100%;
\t min-width:350px;
\t height:25px;
\t font-family: 'Roboto Condensed', sans-serif;
\t font-weight:500;
\t font-size:12px;
\t color: white;
}
#sub-nav ul {
\t margin: 0;
\t padding: 0; \t
\t display: table;
\t width:100%;
\t height: 100%;
\t background-color: rgba(0,0,0,0.3);
}
#sub-nav li {
\t list-style: none;
\t display:table-cell;
\t width:16.6%;
\t height:100%;
\t text-align:center;
\t vertical-align:middle;
\t background-clip: padding-box;
\t background-color:rgba(0,0,0,0.2);
\t border:1px solid rgba(0,0,0,0.0);
}
#sub-nav li:before {
content: '';
display: inline-block;
width: 1px;
vertical-align: middle;
height: 100%;
}
#sub-nav a:link, a:visited {
color: white;
text-decoration: none;
}
#sub-nav a:hover {
color: #FAED26;
\t text-decoration: none;
}
#page-nav-top {
\t top:125px;
\t width:100%;
\t min-width:350px;
\t height:25px;
\t font-family: 'Roboto Condensed', sans-serif;
\t font-weight:500;
\t font-size:10px;
\t color: white;
\t background-color: rgba(0,0,0,0.45);
}
#page-nav-top .left {
\t position:relative;
\t float: left;
\t left: 50px;
\t height:25px;
\t line-height:25px;
}
#page-nav-top .right {
\t position:relative;
\t float: right;
\t right: 50px;
\t height:25px;
\t line-height:25px;
}
#page-break-1 {
\t top:150px;
\t width:100%;
\t height:5px;
\t background-color: rgba(0,0,0,0.3);
}
#page-break-2 {
\t width:100%;
\t height:5px;
\t background-color: rgba(0,0,0,0.3);
}
#page-content {
\t top:165px;
bottom:200px;
width:100%;
\t height:100%;
background-color: rgba(0,0,0,0.3);
\t min-height: calc(100vh - 490px);
}
#footer {
width:100%;
\t height:330px;
\t font-family: 'Roboto Condensed', sans-serif;
\t background-color: rgba(0,0,0,0.9);
}<div id="side-bar"></div>
\t <div id="content">
\t \t <div id="nav-bar">
\t \t \t <?php include ("nav-bar.php"); ?>
\t \t </div>
\t \t <div id="advert">
\t \t \t <?php include ("advert.php"); ?>
\t \t </div>
\t \t <div id="sub-nav">
\t \t \t <?php include ("sub-nav/cart.php"); ?>
\t \t </div>
\t \t <div id="page-nav-top">
\t \t \t <div class="left">HOME >>
\t \t \t \t <font style="color: #FAED26;">SHOPPING CART</font>
\t \t \t </div>
\t \t \t <div class="right"><a href="javascript:history.back()">GO BACK</a>
\t \t \t </div>
\t \t </div>
\t \t <div id="page-break-1"></div>
\t \t <div id="page-content"><br>
text<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
text<br>
</div>
\t \t <div id="page-break-2"></div>
\t \t <div id="footer">
\t \t \t <?php include ("footer.php"); ?>
\t \t </div>
\t </div>
よりよい解決策を、同様にサポートされていないが、'ディスプレイを使用することです。 SafariやIE/Edgeではなく、Chrome、FF、Operaでサポートされています。 – jhpratt
@jhpratt私はそれについても知らなかったことを認めなければなりません！あなたが言ったように、サポートは完璧ではありませんが、私はそれを念頭に置いておきます！ https://www.caniuse.com/#search=flow-root – Kangouroops
ええ、3月にChromeとFFの両方でリリースされました（OperaはChromeのレンダリングエンジンを使用しています）。私は現在、機能の検出に '@support'を使用していますが、それはプリプロセッサを使う利点です（私はそれを完全に忘れてしまいます）。 – jhpratt