#html #css #tabs #navigation #height
#HTML #css #вкладки #навигация #высота
Вопрос:
В настоящее время я работаю над созданием красивой страницы, которая будет содержать 4 вкладки. Я использовал для навигации по вкладкам https://codepen.io/axelaredz/pen/ipome , которая выглядит великолепно. Проблема здесь в том, что мне нужно иметь разную высоту для каждого раздела, который находится под каждой вкладкой. Некоторые вкладки будут содержать больше содержимого, некоторые меньше. Из того, что я вижу, в css у меня есть только одна высота 370 пикселей для всего UL. Как я могу заставить этот код автоматически регулировать высоту или, по крайней мере, добавлять разные высоты для содержимого каждой вкладки? Я попытался добавить относительную позицию и высоту: авто в UL, но это не сработает.
Есть идеи, как я могу заставить это работать?
Спасибо, //C
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS3 Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.0/css/font-awesome.min.css" />
</head>
<body>
<div class="page">
<h1>Pure CSS Tabs</h1>
<!-- tabs -->
<div class="pcss3t pcss3t-effect-scale pcss3t-theme-1">
<input type="radio" name="pcss3t" checked id="tab1"class="tab-content-first">
<label for="tab1"><i class="icon-bolt"></i>Tesla</label>
<input type="radio" name="pcss3t" id="tab2" class="tab-content-2">
<label for="tab2"><i class="icon-picture"></i>da Vinci</label>
<input type="radio" name="pcss3t" id="tab3" class="tab-content-3">
<label for="tab3"><i class="icon-cogs"></i>Einstein</label>
<input type="radio" name="pcss3t" id="tab5" class="tab-content-last">
<label for="tab5"><i class="icon-globe"></i>Newton</label>
<ul>
<li class="tab-content tab-content-first typography">
<h1>Nikola Tesla</h1>
<p>Serbian-American inventor, electrical engineer, mechanical engineer, physicist, and futurist best known for his contributions to the design of the modern alternating current (AC) electrical supply system.</p>
<p>Tesla started working in the telephony and electrical fields before emigrating to the United States in 1884 to work for Thomas Edison. He soon struck out on his own with financial backers, setting up laboratories/companies to develop a range of electrical devices. His patented AC induction motor and transformer were licensed by George Westinghouse, who also hired Tesla as a consultant to help develop an alternating current system. Tesla is also known for his high-voltage, high-frequency power experiments in New York and Colorado Springs which included patented devices and theoretical work used in the invention of radio communication, for his X-ray experiments, and for his ill-fated attempt at intercontinental wireless transmission in his unfinished Wardenclyffe Tower project.</p><p>Tesla started working in the telephony and electrical fields before emigrating to the United States in 1884 to work for Thomas Edison. He soon struck out on his own with financial backers, setting up laboratories/companies to develop a range of electrical devices. His patented AC induction motor and transformer were licensed by George Westinghouse, who also hired Tesla as a consultant to help develop an alternating current system. Tesla is also known for his high-voltage, high-frequency power experiments in New York and Colorado Springs which included patented devices and theoretical work used in the invention of radio communication, for his X-ray experiments, and for his ill-fated attempt at intercontinental wireless transmission in his unfinished Wardenclyffe Tower project.</p>
<p class="text-right"><em>Find out more about Nikola Tesla from <a href="http://en.wikipedia.org/wiki/Nikola_Tesla" target="_blank">Wikipedia</a>.</em></p>
</li>
</ul>
</div>
<!--/ tabs -->
</div>
</body>
</html> Ответ №1:
В предоставленном вами codepen добавьте идентификатор к одному из ваших тегов li следующим образом:
<li id="leo" class="tab-content tab-content-2 typography">
<h1>Leonardo da Vinci</h1>
<p>Italian Renaissance polymath: painter, sculptor, architect, musician, mathematician, engineer, inventor, anatomist, geologist, cartographer, botanist, and writer. His genius, perhaps more than that of any other figure, epitomized the Renaissance humanist ideal. Leonardo has often been described as the archetype of the Renaissance Man, a man of "unquenchable curiosity" and "feverishly inventive imagination". He is widely considered to be one of the greatest painters of all time and perhaps the most diversely talented person ever to have lived. According to art historian Helen Gardner, the scope and depth of his interests were without precedent and "his mind and personality seem to us superhuman, the man himself mysterious and remote". Marco Rosci states that while there is much speculation about Leonardo, his vision of the world is essentially logical rather than mysterious, and that the empirical methods he employed were unusual for his time.</p>
<p class="text-right"><em>Find out more about Leonardo da Vinci from <a href="http://en.wikipedia.org/wiki/Leonardo_da_Vinci" target="_blank">Wikipedia</a>.</em></p>
</li>
Затем в вашем CSS укажите созданный вами идентификатор, как показано ниже, и обработайте высоту оттуда.
/**/
/* height */
/**/
.pcss3t > ul,
.pcss3t > ul > li {
height: 390px;
}
//leo is the id that has been added to the second tabs li tag
#leo {
height: 100px;
}
РЕДАКТИРОВАТЬ: Обратите внимание, я не уверен, почему вы хотели бы отредактировать высоту тега ul, поскольку каждая вкладка разделяется на основе li, а не ul. В любом случае, если вы хотите работать с ul, вы можете сделать это аналогичным образом, добавив идентификатор.
Комментарии:
1. Это не сработает, потому что я ограничен максимальными 390 пикселей, как у UL. Если я добавлю, например, высоту 7000 пикселей к этому идентификатору, ничего не произойдет. И если я добавлю 100 пикселей, у меня получится вертикальная прокрутка. Я пытаюсь расширить <ul> для каждой вкладки. Однако каждый из них имеет разную высоту.