I have two divs as in the illustration below. The position of div #2 is fixed, so it sticks to the right side of the screen no matter how small it might be. If the screen is small, then the div #2 starts to overlap over div #1, which I do not want. I know that this problem is being caused because the left and right positions of both divs are in percentages, but they must stay in percentages only. I can work around this problem using Javascript, but I was thinking of a pure CSS solution for the users who may have Javascript disabled.
我有两个div，如下图所示。 div＃2的位置是固定的，因此无论它有多小，它都会粘在屏幕的右侧。如果屏幕很小，则div＃2开始在div＃1上重叠，这是我不想要的。我知道这个问题是由于两个div的左右位置都是百分比引起的，但它们必须只保持百分比。我可以使用Javascript解决这个问题，但我正在考虑为可能禁用Javascript的用户提供纯CSS解决方案。
+---------+ +---------+
| | | |
| | | |
| #1 | | #2 |
| | | |
| | | |
+---------+ +---------+
What's happening if the screen is small:
如果屏幕很小，会发生什么：
+------ +---------+
| | |
| | |
| #1 | #2 |
| | |
| | |
+------ +---------+
-------scrollbar---
What should happen (screen ends where the scrollbar ends):
应该发生什么（屏幕结束滚动条结束）：
+---------+ +------
| | |
| | |
| #1 | | #2
| | |
| | |
+---------+ +------
------scrollbar----
2 个解决方案
#1
0
Use margin to position your div #2 rather than position: fixed.
使用保证金来定位你的div＃2而不是position：fixed。
#2
0
If u dont want to use float. try using instead right: you can give a left: value to the #2 div ...
如果你不想使用浮动。尝试使用相反的权利：你可以给左边：值＃2 div ...
#1
0
Use margin to position your div #2 rather than position: fixed.
使用保证金来定位你的div＃2而不是position：fixed。
#2
0
If u dont want to use float. try using instead right: you can give a left: value to the #2 div ...
如果你不想使用浮动。尝试使用相反的权利：你可以给左边：值＃2 div ...