html – 如何使左浮动div占用剩余空间的100%?

前端之家收集整理的这篇文章主要介绍了html – 如何使左浮动div占用剩余空间的100%?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如果我有一个75%宽度的容器,内部,左侧和右侧两列,左侧宽度为10em,我如何获得正确的容器占用剩余空间的100%?

我试了这个没有运气:

  1. html,body {
  2. margin:0;
  3. padding:0;
  4. width:100%;
  5. height:100%;
  6. }
  7. #container {
  8. position:relative;
  9. width:75%;
  10. margin:0 auto;
  11. background:blue;
  12. }
  13. #left-container {
  14. position:relative;
  15. float:left;
  16. height:100%;
  17. width:10em;
  18. background:red;
  19. }
  20. #right-container {
  21. position:relative;
  22. float:left;
  23. height:100%;
  24. width:100%;
  25. background:yellow;
  26. }

我可以用百分比轻松地做到这一点,但我需要留下固定的10em宽度.

最佳答案
您可以通过删除float:left,删除宽度并添加overflow:隐藏到右侧div,使框元素占用空间的剩余部分

Working example

  1. #right-container {
  2. position:relative;
  3. overflow: hidden;
  4. height:100%;
  5. background:yellow;
  6. }

猜你在找的HTML相关文章