Изменение размера Div в пределах div с динамической высотой

Привет У меня есть главный div, в котором размещаются еще 2 divs. Нижний - это изменение высоты в зависимости от размера основного размера div.Изменение размера Div в пределах div с динамической высотой

Вот код, насколько я понял:

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title></title> 
    <style type="text/css"> 
     #upper{ 
      background:#F00; 
      border: black solid 2px; 
      overflow-y:scroll; 
      height: 50px; 
     } 
     #lower{ 
      background:#AAF; 
      border: red solid 2px; 
      overflow-y:scroll; 
     } 
     #maindiv{ 
      height: 100%; 
      border: green solid 2px 
     } 
     html,body{margin: 0px;} 
    </style> 
</head> 
<body id="bodyId" > 
<div id="maindiv"> 

    <div id="upper">test<br/> 
    test<br/> 
    test<br/> 
    test<br/> 
    test<br/> 
    v 
    test<br/> 
    test<br/></div> 

    <div id="lower" onresize="resize('lower')">test2</div> 
</div> 
    <script type="text/javascript"> 
     function resize(arg) 
     { 
      var frame= document.getElementById(arg); 
      var heights= document.getElementById(arg).parentNode.offsetHeight ; 
      alert(frame); 
      frame.style.height = heights -50 + "px"; 


     } 



    </script> 
</body> 
</html>

по какой-то причине он не работает. Я хочу получить нижний divs id (ниже) к функции и получить родительский divs id (maindiv) и его высоту. С этим я хочу установить высоту нижнего div.

Любые идеи?

Благодарим за помощь.

TheVagabond

источник

2016-12-16 Thevagabond

Вы смотрели в только с помощью CSS медиазапросы для достижения этого результата? –

Нет. Я получил только что выше. Но как это мне поможет? – Thevagabond

Хотите, чтобы я ответил альтернативными медиа-запросами? –

Хороший способ для обработки изменений в размерах экрана использует медиа запросов в вашем CSS.

W3 школы - хорошее место для start.

Быстрый пример, взять родительский DIV и 2 ребенка:

<div id="parentContainer"> 
    <div id="d1"> </div> 
    <div id="d2"></div> 
</div>

Мы можем STYLE выше, используя:

#parentContainer { 
    border:1px solid red; 
    height:100%; 
    width:300px; 
} 

#d1 { 
    width:300px; 
    height:300px; 
    background-color:green; 
} 

#d2 { 
    width:300px; 
    height:300px; 
    background-color:orange; 
}

Теперь, с запросами средств массовой информации, мы можем сделать некоторые изменения к моделирование dending на экране проклейки:

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

    #d1, #d2 { 
    height:50%; 
    } 
}

В этом примере, мы говорим, когда размер экрана 400px ч ange высота родителя до 100% и сделать дочерний divs по 50% каждый.

Делая это, каждый раз, когда размер экрана уменьшается, так же как и divs, динамически.

источник

2016-12-16 14:11:40

Я должен изучить это. Благодарю. – Thevagabond

Это более эффективный способ создания динамических веб-страниц. Если вам нужна дополнительная помощь, я был бы рад помочь :) –

При использовании вашего примера я получаю стартовые div, но они остаются с 300px при изменении размера. [link] (https://jsfiddle.net/jexp4dyh/3/) – Thevagabond

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title></title> 
    <style type="text/css"> 
     #upper{ 
      background:#F00; 
      border: black solid 2px; 
      overflow-y:scroll; 
      height: 50px; 
     } 
     #lower{ 
      background:#AAF; 
      border: red solid 2px; 
      overflow-y:scroll; 
     } 
     #maindiv{ 
      height: 100%; 
      border: green solid 2px 
     } 
     html,body{margin: 0px;} 
    </style> 
</head> 
<body id="bodyId" onresize="resize('lower')"> 
<div id="maindiv"> 

    <div id="upper">test<br/> 
    test<br/> 
    test<br/> 
    test<br/> 
    test<br/> 
    v 
    test<br/> 
    test<br/></div> 

    <div id="lower">test2</div> 
</div> 
    <script type="text/javascript"> 
     function resize(arg) 
     { 
      var frame= document.getElementById(arg); 
      var heights= frame.parentNode.offsetHeight; 
      frame.style.height = heights -70 + "px"; 


     } 



    </script> 
</body> 
</html>

@Raj был прав с телом, у меня просто было неправильное обращение внутри части скрипта.

@F. Бар Я рассмотрю медиа-запрос, однако у меня нет начальной высоты для нижнего div. Мне нужно играть с этим. Спасибо, однако, обратите внимание на медиа-запрос вообще, пока не слышали об этом.

источник

2016-12-16 14:28:31 Thevagabond

Вы должны получить parentElement вместо parentNode. Вот фрагмент с кнопкой для изменения размера теста. Вы можете вызывать функцию каждый раз при событии, когда изменяется верхняя высота div.

function resize(arg) 
 
{ 
 
    var frame= document.getElementById(arg); 
 
    var heights= document.getElementById(arg).parentElement.clientHeight; 
 
    frame.style.height = heights -50 + "px"; 
 
}

#upper{ 
 
    background:#cca; 
 
    border: black solid 2px; 
 
    overflow-y:scroll; 
 
    height: 50px; 
 
    box-sizing: border-box; 
 
} 
 
#lower{ 
 
    background:#9c9; 
 
    border: red solid 2px; 
 
    overflow-y:scroll; 
 
    box-sizing: border-box; 
 
} 
 
#maindiv{ 
 
    display: block; 
 
    height: 100%; 
 
    border: green solid 2px; 
 
    box-sizing: border-box; 
 
} 
 
html, body 
 
{ 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    
 
}

<div id="maindiv"> 
 

 
    <div id="upper">test<br/> 
 
    test<br/> 
 
    test<br/> 
 
    test<br/> 
 
    test<br/> 
 
    v 
 
    test<br/> 
 
    test<br/></div> 
 

 
    <div id="lower">test2</div> 
 
    <button onclick="resize('lower')">resize</button> 
 
</div>

источник

2016-12-16 14:31:35 Banzay

Изменение размера Div в пределах div с динамической высотой

ответ

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