Skip to content

记写网页时遇到的一点问题

在做hbase实验的时候,要做一个mini的web应用,在做网页的时候遇到了一点问题,可能是因为太久没有做网页的原因。当然这个实验本身是非常简单的,但是我这个人有强迫症啊,要是我写的网页我觉得看着丑,那绝对不行,怎么也要改到我自己满意为止。

主要问题是网页不能自适应浏览器窗口高度,如图:

我的想法是中间那块自适应屏幕高度,当高度变化时,自适应内容高度,然而。。。现在整个网页是非常空的,内容不足以让它撑满屏幕。那怎么办呢?

解决方案一、设置min-height

给中间红色那部分(有一个class名为content),设置min-height:

.content{
     position: relative;
     background: #ffffff;
     margin: 50px 0;
     min-height: 500px;  //添加的代码
 }

 

现在看起来好像没什么问题?但是,假设现在屏幕没有这么高,那么就会显示成这样:

本来内容没有这么多,屏幕也没这么高,你给我来个这么长的滚动条什么意思?看着真的很丑好伐。。。

解决方案二:js/jquery控制元素高度

用js初始化#content的高度,自适应屏幕高度,若#content的高度超过了屏幕高度,则自适应内容的高度,这样能满足我们的要求。

js代码:

<script type="text/javascript">
    window.onload = function(){
        var height = Math.max(document.documentElement.clientHeight, document.body.scrollHeight);
        var container = document.getElementById('content');
        container.style.minHeight = height + 'px';
   }
</script>

 

jquery代码:

<script type="text/javascript">
    $(function(){
        $("#content").css("minHeight", Math.max($(window).height(), $(document.body).outerHeight()));
    })
</script>

解释一下:

document.documentElement.clientHeight同$(window).height(),用来获取网页可见区域的高度,包括border、padding和margin;

document.body.scrollHeight同$(document.body).outerHeight(),用来获取网页正文全文高度,包括border、padding和margin。

现在基本上可以满足需求了,当未展开面板时,能根据屏幕高度自适应,展开时又能根据内容自适应高度。但是右边这个result框是不是太矮了点?

解决方案:还是用jquery:

<script type="text/javascript">
$(function(){
    var height = Math.max($(window).height(), $(document.body).outerHeight()); //取网页可见区域和文档高度的最大值
    $("#content").css("minHeight", height);  //设置#content的最小高度
    var hHeight = $("#header").outerHeight(true); //#header的height,包括height、border、padding、margin
    var heightWithoutMargin = $("#result").outerHeight(); //获取#result的height,包括height、border、padding
    var fullHeight = $("#result").outerHeight(true); //获取#result的height,包括height、border、padding、margin
    var resultMargin = fullHeight - heightWithoutMargin; //获取#result的margin值,这里是margin-top加上margin-bottom
    $("#result").css("minHeight", height - hHeight - resultMargin);
})
</script>

 

解释一下:

用content的高度,减去header的高度,再减去result的margin值,就可以得到result的最终高度了。

看看效果:

OK,差不多达成效果。

事实上,在我采用第一种方法时还遇到了另外一个问题,就是当点击按钮展开面板时,会出现滚动条,因为滚动条是要占宽度的,突然多了滚动条的宽度,这时页面会剧烈地抖动一下,非常影响美观,解决办法如下:

在body上设置:

body{
    background-image: url(img/bg1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;   //加上这两句
    margin-left: calc(100vw - 100%); //加上这两句
}

 

 

Be First to Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注