Question

我有一个带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>

有什么想法吗？

Answer 1

您可以尝试将display: grid添加到容器中，在本例中为body

＆＃13;

body {
  display: grid;
}

#A {
  background: lightblue;
  color: white;
}

#B {
  position: relative;
  width: 5000px;
  background: darkblue;
  color: white;
}

＆＃13;

<html>

<head></head>

<body>
  <div id="A">A</div>
  <div id="B">B</div>
</body>

</html>

＆＃13;

Answer 2

如果你将两个div（A＆amp; B）包裹在另一个div中，你可以实现这一点。

＆＃13;

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; }

＆＃13;

<html>

<head></head>

<body>
<div class="header-wrap">
<div id="A">A</div>
<div id="B">B</div>
</div>
</body>

</html>

＆＃13;

Answer 3

＆＃13;

	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%;
		}

＆＃13;

	<div id="A"><div id="B">B</div>A</div>

＆＃13;

Answer 4

尝试给你的A div最大宽度为5000px以及宽度：100％

#A{
 position:relative; 
 width:100%;
 max-width:5000px;
 background:lightblue; 
 color:white;
}

使用CSS使元素适合页面滚动宽度

4 个答案: