На странице на два столбца, как я могу вырастить покинутое отделение к той же высоте правильного отделения, использующего CSS или JavaScript?
for (int i = 1; i < list.length; i++)
list[i] = list[i - 1];
Эта часть вашего кода вызывает значение всех элементов в списке: 1.
When i = 1, list[1] = list[0] = 1;
when i = 2, list[2] = list[1] = 1; //not 2 because it is already overrided when i = 1.
.... для последнего.
P / S: Попытайтесь понять шаг за шагом в своем коде, прежде чем задавать вопрос.
10 ответов
Используйте jQuery для решения этой проблемы; просто вызовите эту функцию в своей готовой функции:
function setHeight(){
var height = $(document).height(); //optionally, subtract some from the height
$("#leftDiv").css("height", height + "px");
}
Ваш самый простой ответ заключается в следующей версии css (3), который в настоящее время никакая поддержка браузера.
На данный момент Вы понижены к вычислению высот в JavaScript и установке их на левой стороне.
, Если навигация так важна, чтобы быть расположенной таким способом, выполняет его вдоль вершины.
Вы могли также сделать визуальный прием путем перемещения границ в контейнер и большее внутреннее, и заставить его, казаться, быть тем же размером.
это заставляет его выглядеть одинаково, но это не.
<div style="border-left:solid 1px black;border-bottom:solid 1px black;">
<div style="float:left; width: 150px; border-top: 1px solid;">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div style="float:left; width: 250px; border:solid 1px black;border-bottom:0;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
...
</div>
<div style="clear:both;" ></div>
</div>
Это - одна из тех совершенно разумных, простых вещей, которые не может сделать CSS. Поддельные Столбцы, как предложено Silviu, являются hacky, но функциональным обходным решением. Это было бы прекрасно если когда-нибудь был способ сказать
div.foo {
height: $(div.blah.height);
}
Это может быть сделано с CSS с помощью цветов фона
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #87ceeb;
font-size: 1.2em;
}
#container {
width:100%; /* any width including 100% will work */
color: inherit;
margin:0 auto; /* remove if 100% width */
background:#FFF;
}
#header {
width: 100%;
height: 160px;
background: #1e90ff;
}
#content {/* use for left sidebar, menu etc. */
background: #99C;
color: #000;
float: right;/* float left for right sidebar */
margin: 0 0 0 -200px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {
background: #FFF;
margin: 0 0 0 200px;
overflow: hidden;
padding: 10px; /* optional, feel free to remove */
}
#sidebar {
background: #99C;
color: inherit;
float: left;
width: 180px;
padding: 10px;
}
.clearer {
height: 1px;
font-size: -1px;
clear: both;
}
/* content styles */
#header h1 {
padding: 0 0 0 5px;
}
#menu p {
font-size: 1em;
font-weight: bold;
padding: 5px 0 5px 5px;
}
#footer {
clear: both;
border-top: 1px solid #1e90ff;
border-bottom: 10px solid #1e90ff;
text-align: center;
font-size: 50%;
font-weight: bold;
}
#footer p {
padding: 10px 0;
}
</style>
</head>
<body>
<div id="container">
<!--header and menu content goes here -->
<div id="header">
<h1>Header Goes Here</h1>
</div>
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc
vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>
<div id="sidebar">
<!--sidebar content, menu goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>
</div>
<div class="clearer"></div><!--clears footer from content-->
<!--footer content goes here -->
<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html>
Это может быть сделано в CSS! Не позволяйте людям сказать Вам иначе.
самое легкое, большая часть способа без боли сделать это состоит в том, чтобы использовать Поддельные Столбцы метод.
Однако, если то решение не работает на Вас, Вы захотите читать на эта техника . Но предупредите, это - вид хакерства CSS, которое заставит Вас проснуться в холодном поту в середине ночи.
суть его - то, что Вы присваиваете большой объем дополнения к нижней части столбца и отрицательному полю того же размера. Тогда Вы помещаете свои столбцы в контейнер, который имеет overflow: hidden набор. Более или менее значения дополнения/поля позволяют полю продолжать расширяться, пока оно не достигает конца обертки (который определяется столбцом с самым довольным), и любое дополнительное пространство, сгенерированное дополнением, отключено как переполнение. Это не имеет большого количества смысла, я знаю...
<div id="wrapper">
<div id="col1">Content</div>
<div id="col2">Longer Content</div>
</div>
#wrapper {
overflow: hidden;
}
#col1, #col2 {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
убедиться прочитать всю статью я связался с, существует много протестов и другие проблемы реализации. Это не симпатичная техника, но это работает довольно хорошо.
Можно сделать это в действительно простом jQuery, но я не уверен, что JS должен использоваться для таких вещей. Лучший способ состоит в том, чтобы сделать это с чистым css.
-
Смотрят на поддельные столбцы , или даже Жидкие Поддельные Столбцы
-
Также другая техника (не работает над красивым IE6), к position:relative родительский контейнер. Дочерний контейнер (военно-морской список в Вашем случае) должен быть расположен абсолютный и принудительный занять целое место с 'top:0; bottom:0';
@hoyhoy
, Если разработчик может сделать эту работу в HTML, то у него может быть этот дизайн. Если он будет истинным ведущим устройством веб-дизайна, то он поймет, что это - ограничение медиа, поскольку видео не возможно в рекламе журнала.
, Если он хотел бы моделировать вес путем предоставления равной важности на 2 столбца, чем изменение границы, так, чтобы они, казалось, имели тот же вес и сделали цвета контраста границ по отношению к цвету шрифта столбцов.
, Но что касается создания физических элементов та же высота, можно только сделать это с конструкцией таблицы или установкой высот, в данный момент. Для моделирования их кажущийся тем же размером они не должны быть тем же размером.
Задумайтесь о нем, я никогда не делал этого с нижней границей на столбце. Это, вероятно, просто переполняется и отключается. Вы могли бы хотеть иметь нижнюю границу, прибывшую от отдельного элемента, это - часть содержимого столбца.
Так или иначе, я знаю, что это не идеальное решение для чудодейственного средства. Вам, возможно, просто придется играть с ним или бездельничать его недостатки.
Я использую это для выравнивания 2 столбцов с идентификатором "центр" и "право":
var c = $("#center");
var cp = parseInt(c.css("padding-top"), 10) + parseInt(c.css("padding-bottom"), 10) + parseInt(c.css("borderTopWidth"), 10) + parseInt(c.css("borderBottomWidth"), 10);
var r = $("#right");
var rp = parseInt(r.css("padding-top"), 10) + parseInt(r.css("padding-bottom"), 10) + parseInt(r.css("borderTopWidth"), 10) + parseInt(r.css("borderBottomWidth"), 10);
if (c.outerHeight() < r.outerHeight()) {
c.height(r.height () + rp - cp);
} else {
r.height(c.height () + cp - rp);
}
Надежда это помогает.
Существует также основанное на JavaScript решение. Если у Вас есть jQuery, можно использовать ниже плагина.
<script type="text/javascript">
// plugin
jQuery.fn.equalHeights=function() {
var maxHeight=0;
this.each(function(){
if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
});
this.each(function(){
$(this).height(maxHeight + "px");
if (this.offsetHeight>maxHeight) {
$(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
}
});
};
// usage
$(function() {
$('.column1, .column2, .column3').equalHeights();
});
</script>