Выравнивание высоты Div

0

:) У меня небольшая проблема:

У меня есть div, и внутри него у меня два divs, один рядом с другим. Один из левых меняет свою высоту, чтобы сохранить ее соотношение с шириной при изменении размера, и я хочу, чтобы одно из них имело ту же самую высоту, что и левая; У меня есть этот код в jQuery в конце документа:

<script>
     $("#right").css("height",$("#left").height());
</script>

Левый имеет некоторый контент (который придает ему высоту), который занимает некоторое время, чтобы загрузить, поэтому, с этим кодом, когда я загружаю страницу, у одного из правых есть 0px высоты, я думаю, что это потому, что левая имеет hasn 't загружал свой контент при запуске кода. Итак, что мне делать, чтобы убедиться, что я запускаю код, когда на левом загружен его контент? И, как я могу обновлять код каждый раз, когда изменяется высота слева?

Хотя этот код не работает, я создал функцию (называемую уравнением) с этим кодом, а затем я создал кнопку с onclick = "equalize()", и когда я нажимаю кнопку, правая высота получает левую высоту. .-.

  • 0
    Вам нужно делить бок о бок и хотеть, чтобы оба всегда имели одинаковую высоту, не так ли?
Теги:
height

5 ответов

0
Лучший ответ

Хорошо, спасибо всем за ваши ответы, но если кто-то попадает сюда в этом случае, как я решил это:

Высота #left имеет отношение 50% его ширины. Итак, поскольку ширина загружается вместе со всем документом, я помещаю это js (с jQuery...):

$("#right").css("height",$("#left").width()/2);

И... что это :)

Благодаря TJ (кто заставлял меня осознавать это) и всем тем, кто ответил: D

Поделиться
1

попробуй это:

<script>
  $(document).ready(function(){
     $("#right").css("height",$("#left").height()+"px");
  });

</script>
Поделиться
  • 0
    Не сработало :( Можете ли вы прочитать мысль, которую я просто отредактировал в основном вопросе, и скажите мне, почему это происходит? Спасибо, братан.: D
  • 0
    где вы разместили этот код? Вы пытались добавить его внизу перед тегом </ body>.
Показать ещё 1 комментарий
0

Я предлагаю вам использовать эти функции для выравнивания двух или более div:

var maxHeight = 0;

$(".test").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(".test").height(maxHeight);
Поделиться
0

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

<div id='container'>
    <div id='left'></div>
    <div id='right'></div>
</div>

CSS

*{
 margin:0;
 padding:0;
}
html, body{
 height:100%;
}
#container{
 height:100%;
}
#container div{
 display:inline-block;
}
#left{
 height:100%;
 width:200px;;
 background:dodgerblue;
}
#right{
 height:100%;
 width:50%;
 background:orange;
}

Что-то вроде этого JSFiddle

Я что-то упускаю? есть ли причина использовать jQuery? пожалуйста, прокомментируйте ниже..

Поделиться
  • 0
    Привет, Til !, :) Спасибо за ответ, но на самом деле в левом есть кое-что, что дает ему ширину и высоту, и, чтобы сохранить отзывчивый дизайн, когда ширина меняется, высота сохраняет соотношение ...
  • 0
    @LuisGallego, как высота зависит от ширины? ты написал код для этого? если это так, вы должны поделиться этим с вопросом .. если это не изображение, это не произойдет обычно ..
Показать ещё 1 комментарий
0

Используйте jQuery on методу и дождитесь load события load:

$(window).on('load', function(){
    $("#right").css("height", $("#left").height().toString() + "px");
});

Событие load запускается, когда все подмножество ресурсов (например, изображений) загружено. Присоединив его к окну, это будет ждать загрузки всех ресурсов страниц перед выполнением функции.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню