Question

我正在努力将full length left border vertically放在div上。

问题是我无法修复div的高度，因为内容是动态加载的，而且可能很短很长。

我尝试了以下方法：

方法1

CSS

div.right-col {
    position: relative;
}
div.right-col:before {
    content:""; 
    background: #ccc; 
    padding-left:2.5rem;
    position: absolute; 
    bottom: 0; 
    left: 0; 
    height: 50%; 
    width: 1px;
}

HTML

<div class="left-col"></div>
<div class="right-col"></div>

方法2

CSS

.right-col {
        position: relative;
 }
#borderLeft {
    border-left: 2px solid #f51c40;
    position: absolute;
    top: 50%;
    bottom: 0;
}

HTML

<div class="left-col"></div>
<div class="right-col"><div id="border-left"></div></div>

方法3

CSS

.left-col {display:table-cell}
.right-col {
    display:table-cell;
    border-left: 1px solid #ccc;
    padding-left: 2.5rem;
    float: none;
    height:auto;
}

HTML

<div class="left-col"></div>
<div class="right-col"></div>

但上述事情都没有奏效。边界只有在内容存在的地方才会出现。

Answer 1

是否有点像你在寻找什么？

<?php require_once('Connections/osrc.php'); ?>
<?php
$maxRows_search_result = 10;
$pageNum_search_result = 0;
if (isset($_GET['pageNum_search_result'])) {
  $pageNum_search_result = $_GET['pageNum_search_result'];
}
$startRow_search_result = $pageNum_search_result * $maxRows_search_result;

mysql_select_db($database_osrc, $osrc);
$propertyid = $_POST['propertyid'];
$offered = $_POST['offered'];
$property_type = $_POST['property_type'];
$beds = $_POST['beds'];
$city = $_POST['city'];
$locality = $_POST['locality'];
$query_search_result = "SELECT * FROM osrc_data WHERE propertyid LIKE '%$propertyid%' OR offered LIKE '%$offered%' AND property_type LIKE '%$property_type%' AND beds LIKE '%$beds%' AND city LIKE '%$city%' AND locality LIKE '%$locality%' ";
$query_limit_search_result = sprintf("%s LIMIT %d, %d", $query_search_result, $startRow_search_result, $maxRows_search_result);
$search_result = mysql_query($query_limit_search_result, $osrc) or die(mysql_error());
$row_search_result = mysql_fetch_assoc($search_result);

if (isset($_GET['totalRows_search_result'])) {
  $totalRows_search_result = $_GET['totalRows_search_result'];
} else {
  $all_search_result = mysql_query($query_search_result);
  $totalRows_search_result = mysql_num_rows($all_search_result);
}
$totalPages_search_result = ceil($totalRows_search_result/$maxRows_search_result)-1;
?>

否则，可能更容易使用bootstrap和行＆amp; col-xx class。

Answer 2

这有时被称为Holy Grail Problem，并且有许多黑客攻击。然而，第一个真正的＆＃39;修复我认为是flexbox。以下是我将如何解决您的问题： Fiddle

HTML

<div class="container">
    <div class="col left">Hi</br>Let's see how this works.</div>
    <div class="col right">Hi</div>
</div>

CSS

.container, .col {
    display:flex;
}
.container {
    flex:1;
    flex-direction:row;
}
.col {
    flex-direction:column;
}
.col.right {
    border-left: 1px solid black;
}
.col.left {
    order:-1;
}

Answer 3

HTML

<div class="main">
<div class="left-col">sdfsdfsdf</div>
<div class="right-col">sdfsdfsdf
    <br>
        sdfsdfsdf
        </div>
</div>

的CSS

.left-col {display:table-cell; width:100%;   background-color: red;}
.right-col {
    display:table-cell;
    border-left: 1px solid #ccc;
    padding-left: 2.5rem;
    float: none;
    height:auto;
        background-color: green;
}
.main{
    display:table;
}

Demo

动态div

3 个答案: