Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9008

個人用メモ:CSSで縦を自由にリサイズする方法

$
0
0

結論

上下操作.gif

<!DOCTYPE html><htmllang="ja"><head><title>test</title><metaname="viewport"content="width=device-width, initial-scale=1"><metacharset="UTF-8"/><!-- FontAweSome --><linkhref="https://use.fontawesome.com/releases/v5.6.1/css/all.css"rel="stylesheet"><!-- JQuery --><script
        src="https://code.jquery.com/jquery-3.5.1.js"integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="crossorigin="anonymous"></script><!-- bootstrap --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"crossorigin="anonymous"></script></head><body><!--  --><divclass="container all-container"><divclass="sub-container"><divclass="area area1"></div><divclass="area area2"></div><divclass="area area3"></div><divclass="area area4"></div><divclass="area area5"></div></div></div></body><style>.all-container{height:100vh;}.sub-container{height:100%;background-color:#696969;overflow-y:scroll;-ms-overflow-style:none;/* IE, Edge 対応 */scrollbar-width:none;/* Firefox 対応 */}.sub-container::-webkit-scrollbar{display:none;/* Chrome, Safari 対応 */}.area{height:20%;border:solid1pxrgb(37,37,37);resize:vertical;overflow:hidden;background-color:#696969;}.area1{min-height:200px;}.area2{min-height:100px;}.area3{min-height:50px;}.area4{min-height:150px;}.area5{min-height:250px;}</style></html>

Viewing all articles
Browse latest Browse all 9008

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>