Блог

Главная - Вопросы по программированию - Как сделать высоту заголовка относительно высоты содержимого (вкладки)?

Как сделать высоту заголовка относительно высоты содержимого (вкладки)?

#jquery #html #css

#jquery #HTML #css

Вопрос:

Сложно объяснить, что мне нужно, поэтому я добавил изображение, чтобы сделать вещи более понятными:

Пример: смотрите Изображение ниже

Я создаю веб-сайт с содержимым с вкладками на одной странице. Я хочу, чтобы высота моего заголовка и содержимого увеличивалась и уменьшалась, когда имеется больше или меньше содержимого с общей высотой страницы, которая не увеличивается на 100%, когда содержимое меньше максимального размера содержимого. я хочу, чтобы заголовок стал больше / анимировать слайд вниз.

Как я могу изменить размер заголовка и содержимого относительно друг друга и размера содержимого с вкладками?

Пожалуйста, посмотрите На Изображение выше для более четкого объяснения.

Комментарии:

1. это может быть отправной точкой: jsfiddle.net/vlrprbttst/rR7Uu/4

Ответ №1:

Основываясь на скрипке @vlrprbttst, это более или менее то, что вам нужно:

рабочая демонстрация

css

 :root, body {
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
}
.cont {
    background:black;
}
.wrap { height:100%;}
#header {
    height:75%;
    background:red;
}
#content {
    height:25%;
    padding:0;
    margin:0;
    background:tan;
}
#tabbed.dynamic-height {
    background:violet;
    max-height:80%;    
}

Javascript

 $(function() {
    $(window).resize(setHeights);
 setHeights()   
});

  function setHeights() {
 $(".wrap").height($(window).height()-$("#tabbed").height()); 
}

Комментарии:

1. Спасибо за ваш ответ, это отличный шаг в правильном направлении. Но мне нужно содержимое с вкладками внутри #content div. Фон заголовка и фон содержимого вместе заполняют всю страницу. Итак, мне нужен общий размер содержимого и заголовок относительно друг друга. Внутри содержимого будет содержимое с вкладками. Извините, ваше решение было отличным, мой вопрос был неясен 🙂

2. вы хотите, чтобы содержимое с вкладками было внутри содержимого и выровнено по нижней части контейнера?

3. Да, это то, что я хочу, мне удалось это сделать. Проблема в том, что содержимое с вкладками должно прокручиваться, когда оно превышает 60% окна, а большинство высот являются относительными, высота содержимого не возвращает ту же высоту, что и содержимое с вкладками (0%). Поэтому, если я не буду жестко кодировать высоту содержимого в css, это не сработает для меня. Как мне получить высоту содержимого, чтобы вернуть ту же высоту, что и содержимое с вкладками ((большой) дочерний элемент). И если это работает, как мне изменить высоту, когда я использую другую вкладку с разной высотой? вопрос становится все более и более сложным, извините за это

4. Почти, мне нужно, чтобы высота содержимого была той же высоты, что и содержимое с вкладками. Итак, высота содержимого = высота содержимого с вкладками некоторое заполнение. Высота заголовка = 100% — высота содержимого