Q&A
###前提・実現したいこと
CSSでbody,画面全体に付けたborderを、
要素が位置画面に収まらなくなった時に、
borderごとスクロールさせたくない。
###該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="styles.css"> 6</head> 7<body> 8 <div class="container"> 9 要素<br> 10 要素<br> 11 要素<br> 12 要素<br> 13 要素<br> 14 要素<br> 15 要素<br> 16 要素<br> 17 要素<br> 18 要素<br> 19 要素<br> 20 要素<br> 21 要素<br> 22 要素<br> 23 要素<br> 24 要素<br> 25 要素<br> 26 要素<br> 27 要素<br> 28 要素<br> 29 要素<br> 30 要素<br> 31 要素<br> 32 要素<br> 33 要素<br> 34 要素<br> 35 要素<br> 36 要素<br> 37 要素<br> 38 要素<br> 39 要素<br> 40 要素<br> 41 要素<br> 42 要素<br> 43 要素<br> 44 要素<br> 45 要素<br> 46 要素<br> 47 要素<br> 48 要素<br> 49 要素<br> 50 要素<br> 51 要素<br> 52 要素<br> 53 要素<br> 54 要素<br> 55 要素<br> 56 要素<br> 57 </div> 58</body> 59</html>
styles.css
1html, body { 2 width: 100%; 3 height: 100%; 4} 5 6body { 7 margin: 0; 8 padding: 0; 9 border: 5px solid rgb(42, 42, 42, 0.7); 10 background-color: rgba(24, 24, 24, .7); 11 box-shadow: 0 0 8px 3px #000 inset; 12 -webkit-app-region: drag; 13 -webkit-user-select: none; 14 color: #fff; 15} 16 17.container { 18 padding: 10px 15px; 19}
###試したこと
.containerにoverflow-x: scroll;などをつけたりしましたが、
borderごとスクロールしてしまいました。
どなたかご教授ください
回答1件
0
ベストアンサー
こんな感じ？
CSS
1#wrapper { 2 width:100vw; 3 height:100vh; 4 box-sizing:border-box; 5 border:5px solid rgba(42,42,42,.7); 6 background-color:rgba(24,24,24,.7); 7 box-shadow:0 0 8px 3px #000 inset; 8} 9.container { 10 width:100%; 11 height:100%; 12 overflow:auto; 13} 14#box { 15 height:2000px; 16}
HTML
1<div id="wrapper"> 2 <div class="container"> 3 <div id="box"></div> 4 </div> 5</div>
投稿2017/06/24 08:55
総合スコア1084
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。