[英]Make element fit page scroll width with CSS
我有一個width: 100%的頁眉，我想使其不僅可以自動調整為屏幕寬度，而且還可以自動調整為可以被其他元素拉伸到超出屏幕寬度的頁面全寬度。 我可以用JS做到這一點，但我想知道是否可以使用純CSS來實現這一點。
在下面的示例中，A塊的大小與B塊的大小相同，但是在小屏幕上它要短得多（只需向右滾動所有內容即可看到）。
html,body{ position:relative; width:100%; } #A{ position:relative; width:100%; background:lightblue; color:white; } #B{ position:relative; width:5000px; background:darkblue; color:white; }
<html> <head></head> <body> <div id="A">A</div> <div id="B">B</div> </body> </html>
有任何想法嗎？
您可以嘗試在容器中添加display: grid ，在這種情況下為body
body { display: grid; } #A { background: lightblue; color: white; } #B { position: relative; width: 5000px; background: darkblue; color: white; }
<html> <head></head> <body> <div id="A">A</div> <div id="B">B</div> </body> </html>
如果將兩個div（A＆B）包裹在另一個中，則可以實現此目的。
html,body{ position:relative; width:100%; } #A{ position:relative; width:100%; background:lightblue; color:white; } #B{ position:relative; width:5000px; background:darkblue; color:white; } .header-wrap { display: inline-block; }
<html> <head></head> <body> <div class="header-wrap"> <div id="A">A</div> <div id="B">B</div> </div> </body> </html>
html, body { position: relative; width: 100%; } #B { position: absolute; width: 100%; top: 100%; left: 0; background: lightblue; color: white; } #A { position: relative; width: 5000px; background: darkblue; color: white; min-width:100%; }
<div id="A"><div id="B">B</div>A</div>
嘗試給A div最大寬度為5000px，寬度為100％
#A{
position:relative;
width:100%;
max-width:5000px;
background:lightblue;
color:white;
}
如何使偽元素適合 div 的整個寬度？ 它在滾動處被切斷
[英]How do I make a pseudo element fit the entire width of div? It is cutting off at the scroll
是否有一種純粹的 CSS 方法可以使子元素適合具有階梯（寬度）值的父元素
[英]Is there a pure CSS way to make a child element fit into parent with stepped (width) values
CSS：不能使所有鏈接水平滾動而超出頁面寬度
[英]CSS: can't make all the links scroll horizontally running out the page width
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.