На странице на два столбца, как я могу вырастить покинутое отделение к той же высоте правильного отделения, использующего CSS или JavaScript?

Я пытаюсь сделать страницу на два столбца с помощью основанного на отделении расположения (никакие таблицы!). Проблема, я не могу вырастить покинутое отделение для соответствия высоте правильной. У моего правильного отделения обычно есть много содержания.

Вот является парное вниз примером моего шаблона для иллюстрирования проблемы.

<div style="float:left; width: 150px; border: 1px solid;">
  <ul>
    <li>nav1</li>
    <li>nav2</li>
    <li>nav3</li>
    <li>nav4</li>
  </ul>
</div>
<div style="float:left; width: 250px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
....
</div>
15
задан Kareem Dabbeet 13 August 2019 в 17:17
поделиться

10 ответов

Используйте jQuery для решения этой проблемы; просто вызовите эту функцию в своей готовой функции:

function setHeight(){
  var height = $(document).height(); //optionally, subtract some from the height
  $("#leftDiv").css("height", height + "px");
}
3
ответ дан 1 December 2019 в 02:38
поделиться

Ваш самый простой ответ заключается в следующей версии 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>
9
ответ дан 1 December 2019 в 02:38
поделиться

Это - одна из тех совершенно разумных, простых вещей, которые не может сделать CSS. Поддельные Столбцы, как предложено Silviu, являются hacky, но функциональным обходным решением. Это было бы прекрасно если когда-нибудь был способ сказать

div.foo {
height: $(div.blah.height);
}
2
ответ дан 1 December 2019 в 02:38
поделиться

Это может быть сделано с 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>
1
ответ дан 1 December 2019 в 02:38
поделиться

Это может быть сделано в 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;
}

убедиться прочитать всю статью я связался с, существует много протестов и другие проблемы реализации. Это не симпатичная техника, но это работает довольно хорошо.

8
ответ дан 1 December 2019 в 02:38
поделиться

Можно сделать это в действительно простом jQuery, но я не уверен, что JS должен использоваться для таких вещей. Лучший способ состоит в том, чтобы сделать это с чистым css.

  1. Смотрят на поддельные столбцы , или даже Жидкие Поддельные Столбцы

  2. Также другая техника (не работает над красивым IE6), к position:relative родительский контейнер. Дочерний контейнер (военно-морской список в Вашем случае) должен быть расположен абсолютный и принудительный занять целое место с 'top:0; bottom:0';

4
ответ дан 1 December 2019 в 02:38
поделиться

@hoyhoy

, Если разработчик может сделать эту работу в HTML, то у него может быть этот дизайн. Если он будет истинным ведущим устройством веб-дизайна, то он поймет, что это - ограничение медиа, поскольку видео не возможно в рекламе журнала.

, Если он хотел бы моделировать вес путем предоставления равной важности на 2 столбца, чем изменение границы, так, чтобы они, казалось, имели тот же вес и сделали цвета контраста границ по отношению к цвету шрифта столбцов.

, Но что касается создания физических элементов та же высота, можно только сделать это с конструкцией таблицы или установкой высот, в данный момент. Для моделирования их кажущийся тем же размером они не должны быть тем же размером.

0
ответ дан 1 December 2019 в 02:38
поделиться

Задумайтесь о нем, я никогда не делал этого с нижней границей на столбце. Это, вероятно, просто переполняется и отключается. Вы могли бы хотеть иметь нижнюю границу, прибывшую от отдельного элемента, это - часть содержимого столбца.

Так или иначе, я знаю, что это не идеальное решение для чудодейственного средства. Вам, возможно, просто придется играть с ним или бездельничать его недостатки.

0
ответ дан 1 December 2019 в 02:38
поделиться

Я использую это для выравнивания 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);
}

Надежда это помогает.

0
ответ дан 1 December 2019 в 02:38
поделиться

Существует также основанное на 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>
0
ответ дан 1 December 2019 в 02:38
поделиться
Другие вопросы по тегам:

Похожие вопросы: