[ad_1]
「ホーム」タブと「履歴」タブが親 div の 100% を占めるようにしたいのですが、CSS に 100% と入力すると切り取られてしまいます。 また、オーバーフローを非表示にしたいので、表示することは解決策ではありません。
HTML:
.bottom {
background-color: red;
width: 100%;
max-width: 3000px;
max-height: 200px;
margin: auto;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
border-style: solid;
}
.navBottom{
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.navBottom a {
color: white;
text-align: center;
padding: 1vh 50px;
max-height: 200px;
text-decoration: none;
font-size: 1.8vh;
border-right: 2px solid black;
text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
}
CSS:
<pre><div class="bottom"> <div class="navBottom"> <a href="../index.html">Home</a> <a href="history.html">History</a> </div> </div>
完全なコード: https://codepen.io/Marshjek/pen/KQZVBQ
私が試したこと:
パディングを100%にし、幅を100%にし、em、rem、vw、vwを試しました
解決策 1
追加が足りないと思います display:block;width:100%;flex: 0 0 100%;
リンクへ。 これにより、リンクがブロックのように動作し、フレックスを追加すると 100% 表示されます。
また、追加する必要があります flex-wrap: wrap;
親に。
ここにあります コードペン。
以前にも同じ問題がありました Webアプリケーション開発 ページ。
[ad_2]
コメント