Динамический размер DIV, чтобы соответствовать размеру экрана на разных экранах - PullRequest
Новая
       0

Динамический размер DIV, чтобы соответствовать размеру экрана на разных экранах

0 голосов
/ 12 мая 2018

Я пытаюсь изменить размер макета так, чтобы изображение составляло 100% ширины экрана.Я получил эту часть, но когда я пытаюсь поместить div так, чтобы он помещался в рамку на изображении, я не могу получить его надежным для разных размеров экрана.Есть ли способ гарантировать, что мой div будет сидеть внутри моей коробки?Я приложил соответствующую часть моего кода для справки.Я тестирую на двух экранах разных размеров (меньший Chromebook и 17-дюймовый Toshiba). Я только изучаю адаптивный веб-дизайн, поэтому я не совсем уверен, в чем проблема.

Спасибо! 

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

1 Ответ

0 голосов
/ 12 мая 2018

Я не очень хорошо понял ваш вопрос, но я думаю, что вам это нужно. 

    <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>
...