Question

我创建了一个网页，其中包含用户可以发布的博客。问题在于，随着更多博客的发布，它们最终会超越页面的高度并进入后台。我发布博客的所有代码都会进入下面的内容类：

.content {
float: left;
width: 664px;
text-align: justify;
margin: 0px 0px 30px 0;
padding: 10px 10px 10px 10px;
border-style: solid;
border-color: #D3D3D3;
border-width: 1px;
}

我想知道是否有办法使用javascript来获取内容窗格的大小并将其分配到下面的页面类的高度：

.page {
background : url(images/page.png) repeat-y top;
height : 1000px;
padding : 0;
margin : 0;
}

我想我正在寻找的是一种使用javascript重新分配div高度的方法

到目前为止，这是代码：

<?php
include 'connect.php';
include 'header.php';
?>

<form action = 'submitBlog.php' method = 'post'>
<input type="submit" name="Submit" value="Submit a blog"/>
</form>
<?php
$sql = mysql_query("select * from blog order by id desc");
while($row =  mysql_fetch_array($sql)){
$title = $row['title'];
$content = $row['content'];
$date = $row['date'];
$user = $row['user'];
?>

<table border = '1'>
<tr><td><font size = "5"><strong><?php echo $title; ?></strong></font></td><td> Posted on     <?php echo $date; echo "<br>by ".$user;?></td></tr>
<tr><td colspan = '2'><?php echo $content; ?> </td></tr>
<br>
</table>



<?php
}

include 'footer.php';
?> 

<script type = "text/javascript">
function setHeight() {
    var computedHeight = window.getComputedStyle(document.getElementById("content"),null).getPropertyValue("height") ; 
    document.getElementsByClassName('page')[0].style.height = computedHeight;
}
</script>

Answer 1

在纯Javascript中，您可以获得 computed height 样式

var computedHeight = window.getComputedStyle(
                             document.getElementsByClassName("content")[0], null).                              
                             getPropertyValue("height");

这会在 .content

中返回 px 的计算高度

现在将其设置为 page 类，如

document.getElementsByClassName('page')[0].style.height = computedHeight;

仅供参考：由于您仅提及 className ，我使用了 {{ 1}} 作为索引。但是，如果可能，最好对这些元素使用 0 。

Answer 2

此处至少有两个选项，不使用javascript

从.page

删除高度

.page {
background : url(images/page.png) repeat-y top;
height : 1000px; //delete this line
padding : 0;
margin : 0;
}

或将溢出滚动添加到.content

    .content {
        overflow: scroll;
}

Answer 3

如果您将高度设置为auto，它应该可以正常工作。请查看以下内容：

 .page {
    background-color : url(images/page.png) repeat-y top;
    height : auto;
    padding : 0;
    margin : 0;
    }

Answer 4

您可以查看jQuery，以便在调用某些事件时动态更改CSS属性。你可以找到一个很棒的教程here。以下是我的一个旧项目的例子：

    $(window).scroll(function (e) {
        $el = $('.fixedElement');
        if ($(this).scrollTop() > 98 && $el.css('position') != 'fixed') {
            $('.fixedElement').css({ 'position': 'fixed', 'top': '0px', 'width': '90%', 'min-width': '1200px' });
        }
    });

Answer 5

我没有一个好主意，但我认为这可能有用：

page:expression(document.body.height > 1000? "1000": "auto" );

但实际上这是一种糟糕的方式。

使用javascript动态调整CSS

5 个答案: