0

我正在尝试调整 div“main”的大小，以使页脚至少位于屏幕底部（如果不是更远），无论查看者的手机如何定向。有没有办法使用javascript做到这一点？

这是html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<link rel="stylesheet" type="text/css" href="about.css" />
<link rel="shortcut icon" type="image/x-icon" href="/about.ico">
<script type = "text/javascript" src="about.js"></script>
    <body onLoad="baseSize()">
        <div id="container">
        <div id="header">
            <table id="navbar" align="center"><tr>
                <td class="link"><a href="index.html">Home</a></td>
                <td class="link"><a href="poetry.html">Poetry</a></td>
                <td class="link"><a href="essays.html">Essays</a></td>
                <td class="link"><a href="stories.html">Stories</a></td>
                <td class="link"><a href="about.html">About</a></td>
                <td><p id="icon">Craig InTheDell</p></td>
            </tr></table>
        </div>
        <div id="main">
            <div id="text">
            <p>Hello! My name is Craig, Craig InTheDell. I love writing, and I love thinking. I hope that in reading some of my writings here, I have encouraged some of you to think, because after all, if thinking brings about being, better think and be than blank and blink out of existence! But whatever your cerebral activity right now, enjoy!</p>
            </div>
            <div id="contact">
            <h2>Questions or Comments?</h2><p>Shoot me an email at admin@craiginthedell.com. I appreciate your feedback!</p></div>
            <img src="dolphin.png">
        </div>
        </div>
        <div id="footer">
            <div id="image"></div>
        </div>
    </body>
</html>

和 javascript

function baseSize() {
    var available = window.screen.availHeight;

    var right = document.getElementById("main");
    main.style.height = available + "px";
}

它在电脑屏幕和手机的横向模式下效果很好，但在纵向上它太短了。

4

1 回答 1

0

这个网站可能对你有帮助...... 我写了这段代码，我还没有测试过，但应该会有所帮助。

// Define an event handler function to execute when the device orientation changes 
var onOrientationChange = function() {

    // The device is in portrait orientation if the device is held at 0 or 180 degrees
    // The device is in landscape orientation if the device is at 90 or -90 degrees

    var isPortrait = window.orientation % 180 === 0;
    var orientation = isPortrait ? 'portrait' : 'landscape';

    var viewPortWidth;
    var viewPortHeight;

    if (typeof window.innerWidth != 'undefined') {
        viewPortWidth = window.innerWidth,
        viewPortHeight = window.innerHeight
    }
    $('#footer').css('margin-top', viewPortHeight);
    alert('You are now viewing in '+orientation+' mode.');
}

// Execute the event handler function when the browser tells us the device has 
// changed orientation

window.addEventListener('orientationchange', onOrientationChange, false);

// Execute the same function on page load to set the initial <body> class

onOrientationChange();
于 2013-07-21T04:13:13.173 回答