当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Dynamically adjust CSS with javascript

问题描述:

I created a webpage with a blog that users can post on. The problem is that as more blogs are posted, they eventually run past the page's height and into the background. All of my code for posting the blog goes into my content class below:

.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;

}

I was wondering if there was a way to use javascript to get the size of the content pane and assign it to the height of the page class below:

.page {

background : url(images/page.png) repeat-y top;

height : 1000px;

padding : 0;

margin : 0;

}

I guess what I'm looking for is a way to reassign the height of the div for page using javascript

Here is the code thus far:

<?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>

网友答案:

In pure Javascript, you can get the computed height style like

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

This returns the computed height of .content in px

Now set it to page class like

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

FYI: Since you've mentioned only the className I have used the 0 as index. However it is better to use id for these elements if possible.

网友答案:

At least two options here without using javascript

delete the height from .page

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

or add overflow scroll to .content

    .content {
        overflow: scroll;
}
网友答案:

If you set the height to auto, it should work as you want. Please check below:

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

You can look into jQuery to dynamically change CSS properties as the certain events are called. You can find a great tutorial here. Here is an example from an old project of mine:

    $(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' });
        }
    });
网友答案:

I don't have a great idea, but i think this might work:

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

but this is a bad way actually.

分享给朋友:
您可能感兴趣的文章:
随机阅读: