Как получить дополнительный div всегда иметь ту же высоту, что и первый div?

У меня есть два divs, которые называются signin и info.
Я хочу, чтобы информация всегда имела ту же высоту, что и signin, и если текст внутри не подходит, чтобы сделать info, у вас есть полоса прокрутки.Как получить дополнительный div всегда иметь ту же высоту, что и первый div?

Можно ли получить это через некоторые простые JS, html и css? Вот что я пробовал:

var firstDivHeight = document.getElementById('#signin').clientHeight; 
document.getElementById("#info").style.height = firstDivHeight;

Вот jsfiddle со всем моим HTML и CSS http://jsfiddle.net/sleshwave/4v7bvw5o/

Спасибо.

источник

2015-09-05 Stefan Pricope

Я хотел бы использовать display:table, в большинстве случаев, тоже, но из-за ваших конкретных запросов:

1) информационная строка должна иметь такую же высоту, как и форма панели (а не наоборот, #signin диктует высоту Инфо бар)

2) информационная строка может иметь больше содержания, и нуждается в скроллбар тоже

я хотел бы использовать это:

window.onload = function(){ 
firstDivHeight= document.getElementById('signin').offsetHeight; 
document.getElementById("info").style.height = firstDivHeight+'px'; 
}

В CSS:

#info { 
    background-color: red; 
    float: left; 
    margin-left: 2%; 
overflow-y:auto; 
    width:50%; //add desired width 
}

Демо: http://jsfiddle.net/29mzjq5x/3/

Примечание: я использовал offsetHeight, а не clientHeight, потому что он будет рассчитывать Прокладки и границы тоже ...

источник

2015-09-05 15:44:39 sinisake

Он отлично работал! Большое спасибо –

Хотя я заметил небольшую проблему. Два divs имеют одинаковую высоту всякий раз, когда страница загружается, но если окно изменяется, информация div не будет той же высоты, что и signin –

@StefanPricope, вы должны добавить тот же расчет при изменении размера: https: // разработчик. mozilla.org/en-US/docs/Web/Events/resize – sinisake

Измените структуру и используйте дисплей: table/table-cell; свойства. http://jsfiddle.net/4v7bvw5o/3/

@import http://fonts.googleapis.com/css?family=Roboto; 
 
#signin { 
 
    display:table; 
 
    border-spacing:1em; 
 
} 
 
form { 
 
    background-color: red; 
 
    width: 20%; 
 
    margin-left: 2%; 
 
    text-align: center; 
 
    display:table-cell; 
 
} 
 
input[type=text], input[type=password], input[type=email] { 
 
    width: 92%; 
 
    padding:10px; 
 
    margin-top:8px; 
 
    border:1px solid #ccc; 
 
    padding-left:5px; 
 
    font-size:16px; 
 
    font-family:Roboto; 
 
    background-color: rgba(211, 211, 211, 0.3); 
 
} 
 
#info { 
 
    background-color: red; 
 
    display:table-cell; 
 
} 
 
input[type=submit] { 
 
    width:92%; 
 
    background-color:#1471BF; 
 
    color:#fff; 
 
    border:2px solid #1471BF; 
 
    padding:10px; 
 
    font-size:20px; 
 
    cursor:pointer; 
 
    font-family: Roboto; 
 
    margin-bottom:15px; 
 
    -webkit-transition:border 0.3s, background-color 0.3s; 
 
    transition:border 0.3s, background-color 0.3s; 
 
} 
 
input[type=submit]:hover { 
 
    background-color: #B93948; 
 
    border:2px solid #B93948; 
 
}

<!doctype html> 
 
<title>New account</title> 
 
<body style="background-color:#232324"> 
 
    
 
<h1 style="text-align:center">Creating a new account</h1> 
 

 
    <div id="signin"> 
 
     <form> 
 
      <br> 
 
      <label>Username</label> 
 
      <p></p> 
 
      <input id="name" name="username" type="text"> 
 
      <p></p> 
 
      <label>Email</label> 
 
      <p></p> 
 
      <input id="email" name="email" type="email"> 
 
      <p></p> 
 
      <label>Name</label> 
 
      <p></p> 
 
      <input id="nume" name="name" type="text"> 
 
      <p></p> 
 
      <label>Last Name</label> 
 
      <p></p> 
 
      <input id="prenume" name="lastname" type="text"> 
 
      <p></p> 
 
      <label>Password</label> 
 
      <p></p> 
 
      <input id="password" name="password" type="password"> 
 
      <p></p> 
 
      <label>Confirm password</label> 
 
      <p></p> 
 
      <input id="repassword" name="password_conf" type="password"> 
 
      <p></p> 
 
      <input name="submit" type="submit" value=" Register"> 
 
     </form> 
 
     <div id="info"> 
 
      <p>This is the story about a guy named blue</p> 
 
     </div> 
 
    </div> 
 
</body>

источник

2015-09-05 15:26:27

большое спасибо, это как-то works.The Единственная проблема заключается в том, что оно не имеет полосы прокрутки при добавлении текста и, кажется, для входа в аккаунт такая же длина, как и информация, а не наоборот. Еще большое спасибо! –

@StefanPricope может быть экран того, что вы хотите, поможет :) –

GCyrillus's решение лучше, потому что он не требует javascript, вы могли бы попробовать подобную раскладку с помощью flexbox.

Если вы хотите использовать javascript, это должно сработать.

var firstDiv = document.getElementById('signin'); 
var secondDiv = document.getElementById('info'); 

secondDiv.style.height = firstDiv.clientHeight + 'px';

Обратите внимание, что этот код должен запускаться только при загрузке страницы!

источник

2015-09-05 15:33:23 Pustur

I не нравится использовать таблицу для макета. Вы можете использовать макет гибкой коробки, он имеет хорошую поддержку во всех основных браузерах. http://caniuse.com/#feat=flexbox

Предлагаемое решение:

Включите обе дивы (.цв) в другом контейнере (# контейнер-дела) и отображать его как прогибается

#container-div { 
Display: flex; 
}

Используйте гибким вырастал свойство расти гибкого элемента в полную ширину.

.col{ 
Flex: 1; 
}

Не забудьте добавить префиксы поддерживать все браузеры

источник

2015-09-05 15:52:57

Я забыл упомянуть, что я уже пробовал использовать flexbox, и он, похоже, ничего не сделал. Спасибо за вашу помощь! –

У меня есть работа, пожалуйста, проверьте эту скрипту: https://jsfiddle.net/EiyadZ/570L8yx5/ –

Обновление про прокрутку: Чтобы иметь поведение прокрутки, вы должны указать максимальную высоту для столбца. В противном случае элементы гибкости будут расти по мере добавления контента и всегда будут одинаковой высоты. https://jsfiddle.net/EiyadZ/570L8yx5/6/ –

Как получить дополнительный div всегда иметь ту же высоту, что и первый div?

ответ

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