0

視聴者の電話の向きに関係なく、フッターが少なくとも画面の下部にあるように（それ以上ではないにしても）、div「メイン」のサイズを変更しようとしています。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>

そしてジャバスクリプト

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 に答える