Q&A
前提・実現したいこと
overflow-x: scroll;を設定したpre要素の子要素に設定した背景色を広げたいです。
具体的には
html
1<body> 2<div id="content"> 3 #content 4 <div class="entry-content"> 5 .entry-content 6 <pre class="code"> 7 <div class="code-line">foo bar baz ................................................長めの文字列</div> 8 <div class="code-line">foo bar baz ................................................長めの文字列</div> 9 <div class="code-line">foo bar baz ................................................長めの文字列</div> 10 <div class="code-line">foo bar baz ................................................長めの文字列</div> 11 </pre> 12 </div> 13</div> 14</body>
としたときに、div.code-lineに設定した背景色がスクロールした時にも描画されるようにしたいです。
発生している問題・エラーメッセージ
どうやってもスクロール前の幅でしか背景色が描画できません。
実現方法がないような気がしています。
スクロール前
スクロール後
該当のソースコード
CodePenでのデモです。
CodePen | overflow(scroll)したpreの子要素の背景色が切れる
試したこと
子要素に対してwidth: 100%;を設定しましたが効果がありません。
補足情報
内容としては同一の質問が上がっていますが、未解決です。
https://teratail.com/questions/260283
回答1件
0
ベストアンサー
linear-gradient で縞模様の背景にしたらどうでしょう。
css
1.code { 2 line-height: 1.5; 3 background-image: linear-gradient(red 50%, #99FF99 50%); 4 background-size: 3em 3em; 5}
投稿2020/08/27 23:06
総合スコア33790
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/28 10:25