Javascript 缩小网站高度以便于移动_Javascript_Html_Css

Javascript 缩小网站高度以便于移动

javascript html css

Javascript 缩小网站高度以便于移动,javascript,html,css,Javascript,Html,Css,我有一个网站，我正在工作。在我走得太远之前（是的，大多数链接都不起作用，因为我还没有建立它们），我正在努力确保它适合iPhone和其他移动设备。高度（CSS）在计算机上工作得很好，但它远远低于我在移动设备上加载时的预期以下是my index.html页面的脚本： html body { width: 100%; height: 100%; margin: 0%; padding: 0px; overflow: hi

我有一个网站，我正在工作。在我走得太远之前（是的，大多数链接都不起作用，因为我还没有建立它们），我正在努力确保它适合iPhone和其他移动设备。高度（CSS）在计算机上工作得很好，但它远远低于我在移动设备上加载时的预期

以下是my index.html页面的脚本：

html body {
        width: 100%;
        height: 100%;
        margin: 0%;
        padding: 0px;
        overflow: hidden;
        display: flex;
        background-image: url(http://www.jpegchaos.com/chipimage.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    #fullbody {
        margin: 0px;
        float: left;
        position: absolute;
        padding: 0px;
        width: 100%;
        height: 100%;
        display: flex;
    }
    #left {
        width: 15%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        display: inline-block;
        opacity: 0;
    }
    #center {
        width: 70%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        background-color: lightgrey;
        display: inline-block;
    }
    #centertextarea {
        width: 90%;
        height: 100%;
        padding: 0px;
        margin-right: 5%;
        margin-left: 5%;
        margin-top: 0px;
        text-wrap: normal;
        word-wrap: break-word;
    }
    #right {
        width: 15%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        display: inline-block;
    }
    .header {
        font-size: 40px;
        color: black;
        text-align: center;
    }
    .footer{
        background-color: lightgrey;
        font-size: 13px;
        color: black;
        text-align: center;
        bottom: -60px;
        height: 100px;
        left: 0;
        position: absolute;
        width: 60%;
        margin-left: 20%;
    }

然后是HTML

<!DOCTYPE html>
<html>
    <head>
        <meta name=viewport content='width=700'>
        <title>JPeG & Chaos LLP - Your Technology Repair HQ</title>
        <link rel="stylesheet" href="styles/structure.css">
        <link rel="stylesheet" href="styles/advanced.css">
        <link rel="stylesheet" href="styles/tags.css">
        <link rel="icon" type="image/png" href="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/c27.0.160.160/p160x160/541649_1552490621690166_7622307717201533155_n.jpg?oh=0be92daed3243de2719efe5185583bc1&oe=55D3880B&__gda__=1437242841_f81d654a074a10e951f604fd343220c9">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            $(function () {
                $("#top").load("structure/header.html");
                $("#bottom").load("structure/footer.html");
                $("#menubar").load("structure/menubar.html");
                $("#newssidebar").load("news.html");
            });
        </script>
    </head>
    <body>
        <div id="fullbody">
            <div id="left"></div>
            <div id="center">
                <div id="top"></div>
                <div id="menubar"></div>
                <div id="centertextarea">
                    <table class="noborder">
                        <tr class="noborder">
                            <td class="splitleft">
                                <!-- Removed for Clerity -->
                            </td>
                            <td class="hollowmiddle"></td>
                            <td class="splitright">
                                <!-- Removed for Clerity -->
                            </td>
                        </tr>
                    </table>

                </div>
                <div id="bottom"></div>
            </div>

            <div id="right">
                <div id="newssidebar"></div>
            </div>
        </div>
    </body>
</html>


JPeG&Chaos LLP-您的技术修复总部
$（函数（）{
$（“#top”）.load（“structure/header.html”）；
$（“#bottom”）.load（“structure/footer.html”）；
$（“#menubar”）.load（“structure/menubar.html”）；
$（“#新闻边栏”）.load（“news.html”）；
});

框架和所有东西都能完美承载，但中间的那个似乎太过分了

我去掉了“footer”div，但它仍然太高，因此将其从可能性列表中排除。

经过许多更改，根据收到的评论，我做了以下操作来修复此问题：

*从

#右侧

div中删除了高度功能
*将

#left

div更改为

高度：1px

*将#中心div更改为高度：100vh


*新增overflow-y：自动到#中心
div

*将#页脚更改为：

.footer{
    background-color: lightgrey;
    font-size: 13px;
    color: black;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    margin-left: 15%;
    white-space: nowrap;
}

在Chrome中，开发者工具中有一个“设备模式”（“元素”选项卡旁边的智能手机/平板电脑图标），可以用来模拟设备。FireFox也有类似的功能。在那里测试页面可能会有帮助，因为您可以实际检查元素并检查应用了哪些CSS规则。@GolezTrol谢谢您。我将继续使用它。如果他们在手机上以横向视图查看网站会怎么样？那真的很小。为什么要用这种方式限制高度？我最初的目标是在可查看页面的底部有一个页脚。因为最初我不需要担心内容溢出，所以我设置了overflow:hidden并将页脚粘到底部。我开始觉得我可能想用像素来表示距离，而不是它们的百分比……网页设计的本质是随着更多内容的添加，内容会垂直扩展。您仍然可以使用粘性页脚，并使用内容overflow-y:auto
使其在过长时可以滚动。