时间戳

首页 > 解决方案 > 动态调整 DIV 大小以适应在不同屏幕上调整大小的空间

html - 动态调整 DIV 大小以适应在不同屏幕上调整大小的空间

问题描述

我正在尝试调整布局大小，使图像为屏幕宽度的 100%。我得到了那部分，但是当我尝试放置一个 div 以使其适合图像中的框时，我似乎无法让它对于不同尺寸的屏幕可靠。有没有办法确保我的 div 放在我的盒子里？我已附上我的代码的相关部分以供参考。我正在两个不同尺寸的屏幕上进行测试（一个较小的 chromebook 和一个 17" 东芝）。我只是在学习响应式网页设计，所以我不太确定问题出在哪里。

谢谢！

<div id="banner">
  <img src="http://grouptheory.sammiirose.com/group%20theory%20header%202.png" width="100">
</div>
<div id="stuff">
  Test words in here
</div>
<style type="text/css">
  #banner{ top: 0%; width:100%;}
  #stuff { position: absolute; height: 70%; top: 25%; left: 1%; width: 72%;
           border: 1px solid black; overflow: auto; color: #000000; 
           text-align: center;}
</style>

标签： htmlcssresponsive-design

解决方案

我没有很好地理解你的问题，但我认为你需要这个。 

    <div id="stuff">
      <div id="banner">
          <img src="http://grouptheory.sammiirose.com/group%20theory%20header%202.png">
        </div>
      Test words in here
    </div>
    <style type="text/css">
      #banner img{ width:100%;}
      #stuff { position: absolute; height: 70%; top: 25%; left: 1%; width: 72%;
               border: 1px solid black; color: #000000; 
               text-align: center;}
    </style>

推荐阅读