Расширяемые абсолютные позиционные дочерние divs

У меня есть два абсолютных позиционных дочерних div внутри относительного позиционного div. У меня возникают проблемы, делающие два абсолютных позиционированных дочерних divs расширяемыми, не перекрывая друг друга. Я уже пробовал разные способы. Я также посмотрел на это position absolute but resize parent, но мне нужно, чтобы мои дочерние divs были абсолютными позициями, не относительными.Расширяемые абсолютные позиционные дочерние divs

Также это для просмотра на мобильных устройствах с планшетом, поэтому вся ширина уже 100%.

Редактировать: Мне нужно только расширение .child2, чтобы быть увеличенным по высоте, потому что .child1 - это изображение, и оно всегда будет 200 пикселей в высоту.

Мой Пример кода:

<div class="parent"> 
    <div class="child1"> 
     <h2>Client</h2> 
     <h4>Client Name</h4> 
    </div>  
    <div class="child2"> 
     <img src="imageurl" /> 
    </div> 
</div> 
<div class="parent"> 
    <div class="child2"> 
     <img src="imageurl" /> 
    </div>  
    <div class="child1"> 
     <h2>Skills</h2> 
     <h4>Skill Utilized</h4> 
    </div> 
</div> 
<div class="parent"> 
    <div class="child1"> 
     <h2>Project URL</h2> 
     <h4><a href="#">Link to Project</a></h4> 
    </div>  
    <div class="child2"> 
     <img src="imageurl" /> 
    </div> 
</div>

Мой образец CSS:

.parent { 
    position: relative; 
    width: 100%; 
    height: auto; 
} 

.child1 { 
    position: absolute; 
    top: 50px; 
    width: 100%; 
    height: 200px; 
} 

.child2 { 
    position: absolute; 
    top: 250px; 
    width: 100%; 
    height: auto; 
}

источник

2013-07-22 Anthony Russo

Вы можете установить max-height для обоих дивы или использовать Javascript, чтобы обнаружить, если сумма высот Див больше, чем высота родительского div.

источник

2013-07-22 20:32:11 Pieter

Как я могу использовать JS, чтобы обнаружить это под окном просмотра 767 пикселей? Я не знаю JS, поэтому, пожалуйста, оставьте это для меня. Я знаю, как создать JS-файл и связать его соответствующим образом, но не как написать код, просто чтобы уточнить. –

'document.getElementById ('ID родительского div'). Style.height = 200 + parseInt (document.getElementById ('идентификатор расширяющегося div'). Style.height)'. Помните, что вы должны использовать идентификатор, а не класс для выбора элемента. Вы можете поместить этот код между тегами сценария в голове. – Pieter

Я добавил в файл wordpress header.php. --- Я создал options.js --- Теперь я просто разместил ваш код там или его нужно написать определенным образом? Кроме того, я вводил # перед идентификатором или только имя идентификатора? –

Вам нужно указать родительской высоте, иначе код не поймет, что такое верхнее положение, а что - нижнее.

CSS

.parent { 
    position: relative; 
    width: 100%; 
height: 300px; 
} 

.child1 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

.child2 { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
}

источник

2013-07-22 20:36:28 Bucthree

Я забыл упомянуть, что это для просмотра на мобильных устройствах размером с планшета. Таким образом, ширина уже установлена на уровне 100%. –

Хотите, чтобы дочерние divs были бок о бок или один поверх другого? – Bucthree

В верхней части одной другой. –

Я думаю, что вы собираетесь должны смотреть в другой вариант, кроме HTML и CSS, чтобы решить эту проблему. Использование позиции css приведет к тому, что применяемый элемент будет за пределами нормального потока разметки. Использование позиции: относительный элемент не учитывает любое позиционирование, которое вы могли применить к другим элементам. У вас есть относительное положение относительно нескольких элементов, но на самом деле не вызывайте, где или что вы хотите, чтобы они располагались относительно, следовательно, почему они складываются.

Если вы пытаетесь создать полностью динамичный и отзывчивый сайт, размер которого изменится на любое разрешение планшета и мобильного телефона, возможно, посмотрите на метатег «viewport».

Это пример:

HTML

<head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum=-scale=1.0, initial-scale=1.0" /> 
     <title>Responsive Web Design</title> 
     <link rel="stylesheet" type="text/css" href="css/screenStyles.css" /> 
     <link rel="stylesheet" type="text/css" href="css/screenLayoutLarge.css" /> 
     <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="css/screenLayoutSmall.css" /> 
     <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/screenLayoutMedium.css" /> 
     <!--[if lt IE 9]> 
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
    </head>

Использование видовых мета тег позволяет вызывать мин-макс ширины, а затем ссылаться на различные таблицы стилей, которые будут использоваться с различными разрешениями экрана ,

источник

2013-07-23 13:54:07 Bucthree

Этот сайт уже реагирует и использует видовое окно. Я отредактировал код немного, это помогает, если мне нужен только .child2 для расширения в высоту? –

Было бы более полезно, если бы у вас был макет, чтобы показать, чего вы хотите достичь. – Bucthree

http://i39.tinypic.com/29dkbp3.jpg to http://i41.tinypic.com/2i7y6oi.jpg --- Он выглядит так, как я хочу, чтобы он выглядел прямо сейчас, но если содержание в нижней части продолжается высота родительского div нет. –

Расширяемые абсолютные позиционные дочерние divs

ответ

Смежные вопросы