Ответственные divs, охватывающие другой контент при изменении размера

Question

У меня есть три чувствительных div внутри div. Все хорошо, пока я не изменю размер, и divs будут сидеть поверх содержимого чуть ниже него.

Что, кажется, происходит из-за того, что содержимое ниже моих чувствительных divs не движется вниз, чтобы вообще компенсировать изменения страницы. Я пробовал встроенный блок, играя с float и ясным, переполнением, ничего, похоже, не изменяет его.

JSFiddle https://jsfiddle.net/Qozmiq/mgh0yL78/

Это должно быть что-то простое, что я пропускаю.

CSS

#pagewrapq { 
padding: 5px; 
width: 98%; 
height: 300px; 
margin: 20px auto; 
} 
headerq { 
height: 100px; 
padding: 0 15px; 
} 
#contentq { 
width: 345px; 
display: inline-block; 
padding: 5px 15px; 
} 

#middleq { 
width: 345px; /* Account for margins + border values */ 
display: inline-block; 
padding: 5px 15px; 
margin: 0px 5px 5px 5px; 
} 

#sidebarq { 
width: 345px; 
padding: 5px 15px; 
display: inline-block; 
} 



/* for 980px or less */ 
@media screen and (max-width: 980px) { 

#pagewrap { 
    width: 94%; 
} 
#content { 
    width: 41%; 
    padding: 1% 4%; 
} 
#middle { 
    width: 41%; 
    padding: 1% 4%; 
    margin: 0px 0px 5px 5px; 
    float: right; 
} 

#sidebar { 
    clear: both; 
    padding: 1% 4%; 
    width: auto; 
    float: none; 
} 

header, footer { 
    padding: 1% 4%; 
} 
} 

/* for 700px or less */ 
@media screen and (max-width: 600px) { 

#contentq { 
    width: auto; 
    float: none; 
} 

#middleq { 
    width: auto; 
    float: none; 
    margin-left: 0px; 
} 

#sidebarq { 
    width: auto; 
    float: none; 
} 

} 

/* for 480px or less */ 
@media screen and (max-width: 480px) { 

headerq { 
    height: auto; 
} 
h1q { 
    font-size: 2em; 
} 
#sidebarq { 
    display: none; 
} 

} 


#contentq { 
background: #f0efef; 

} 
#middleq { 
background: #f0efef; 

} 
#sidebarq { 
background: #f0efef; 
} 
headerq, #contentq, #middleq, #sidebarq { 
margin-bottom: 5px; 
} 

HTML

<div id="pagewrapq"> 
 
<section id="contentq"><img class="displayed" title="Precision Engineering" alt="Precision Engineering" src="https://www.newvape.com/media/wysiwyg/calipers1.png" /> 
 
<h2 style="text-align: center;">Exceptional Engineering</h2> 
 
<p>Function &amp; Style influence our engineering focus for our Domeless Nails, Enails, Dabbers, Grinders and Carb Caps. Having over 50 years of engineering and design experience allows us to create products that will last a lifetime. &nbsp;</p> 
 
</section> 
 
<section id="middleq"><img class="displayed" title="Made in the USA" alt="Made in the USA" src="https://www.newvape.com/media/wysiwyg/usa1.png" /> 
 
<h2 style="text-align: center;">US-Melted Metals</h2> 
 
<p>We use only the finest US-melted metals. &nbsp;Whether it be our grade 2 titanium, 316 stainless steel, or 6061 Aluminum, only the finest materials go into our products. &nbsp;We start with the best, so we can create the best. &nbsp;</p> 
 
</section> 
 
<aside id="sidebarq"><img class="displayed" title="NewVape Quality" alt="NewVape Quality" src="https://www.newvape.com/media/wysiwyg/gear1.png" /> 
 
<h2 style="text-align: center;">Advanced Function</h2> 
 
<p>Our vaporizer accessories are designed to optimize your experience to get the most out of your investment. &nbsp; Our Pax accessories let you extract more vapor, increase airflow, and adapt your vaporizer to work with a multiude of devices. &nbsp;</p> 
 
</aside> 
 
</div> 
 
<div class="page-title category-title"> 
 
<h1>FEATURED PRODUCTS</h1> 
 
<hr /> 
 
<h1>&nbsp;</h1> 
 
</div> 
 
<h3><span><strong><strong><a title="Pax 2 Replacement Screen" href="http://www.newvape.com/pax-accessory-screen-pax2-2732/"><img title="Pax 2 Replacement Screen" alt="Pax 2 Replacement Screen" src="https://www.newvape.com/media/wysiwyg/pax-2-screen-accessory-newvape.png" /></a>&nbsp; &nbsp;<a title="Domeless Combo Nail" href="http://www.newvape.com/domeless-nail-10-14-18mm-2424/"><img title="Domeless Nail - Combo 10mm 14mm 18mm" alt="Domeless Nail - Combo 10mm 14mm 18mm" src="https://www.newvape.com/media/wysiwyg/domeless-nail-newvape.png" /></a>&nbsp; &nbsp;<a title="Portable enail" href="http://www.newvape.com/enail-playmate-2723/"><img title="Domeless Nail - Combo 10mm 14mm 18mm" alt="Domeless Nail - Combo 10mm 14mm 18mm" src="https://www.newvape.com/media/wysiwyg/enail-newvape.png" /></a>&nbsp; &nbsp;<a title="3 inch Fine Grinder" href="http://www.newvape.com/fine-grinder-titanium-gray-2726/"><img title="Fine Grinder - NewVape" alt="Fine Grinder - NewVape" src="https://www.newvape.com/media/wysiwyg/3-inch-fine-grinder-newvape.png" /></a></strong></strong></span></h3>

Answer 1

Вы должны удалить height: 300px из #pagewrapq. В противном случае контент, естественно, будет плавать в содержимом ниже при крахе, занимая гораздо больше места, чем это.

Answer 2

это выглядит как ваш #pagewrapq{height:300px;} вызывает проблему. Если вы видите элемент в своем живом тесте и отмените выбор этого атрибута css, тогда при изменении размера окна вы увидите экран страницы.

Вам это нужно? или, возможно, вы можете перенести атрибут перезаписи с помощью @media. Поэтому, когда страница получает повторно размера ниже определенного числа, то высота меняется height:100%

как в попытке размещения этого в файле CSS:

@media screen and (max-width: 1184px) { 
    #pagewrapq { 
     height:100%; 
    } 
} 

Answer 3

Удалить height: 300px; или изменить его на min-height: 300px; в #pagewrapq.

Answer 4

Вы можете сохранить высоту #pagewrapq, если это необходимо.

Попробуйте добавить дисплей: встроенный стол для вашего pagewrapq Id, он должен исправить

#pagewrapq { 
    padding: 5px; 
    width: 98%; 
    height: 300px; 
    margin: 20px auto; 
    display: inline-table; 
} 

Answer 5

Не дает фиксированную высоту 300px, то почему другое содержимое переполненно друг на друг, если вы удалить высоту его сделали для вас

так удалить высоту от #pagewrapq, дать как:

#pagewrapq 
{ 
height:auto; 
}