Question

我目前正在调整我的填充顶部和底部的百分比（MENU和ABOUT），以便它们每个都填满一页。它在我的屏幕上看起来很棒，但是当它进入不同的屏幕时，内容不适合页面。有没有办法检测屏幕尺寸并改变百分比？

HTML：

<div id="menu">
                    <p class="menu_info">
                        The food at Cure is inspired by the season’s best produce, gathered by a variety of local and global artisans. These seasonal flavors are crisply paired with a sharp drinks list which includes a reserve wine list of hard to source vintage wines for connoisseurs.
                    </p>

                    <div id="month_menu">

                        <p id="month">OUR JULY MENU</p>

                        <div>
                            <p id="lunch">LUNCH</p>
                            <div class="courses">
                                <p><a href="menu/cure_menu_july_lunch.pdf" target="_blank">2 course/3 course</a></p>
                            </div>
                        </div>

                        <div>
                            <p  id="dinner">DINNER</p>
                            <div class="courses">
                                <p>mon-thurs:</p>
                                <p><a href="menu/cure_menu_july_4course.pdf" target="_blank">4 course</a></p>
                            </div>
                            <div class="courses">
                                <p>fri & sat:</p>
                                <p><a href="menu/cure_menu_july_5course.pdf" target="_blank">5 course</a></p>
                            </div>
                        </div>

                    </div> 


        <div id="about">
            <p class="about_header">OUR RESTAURANT</p>
            <p class="about_info">Cure, which in Latin (curare) stands for hospitality or “to take care of”, is headed by Chef-Owner Walsh, who has conceptualized a creative space where a seamless experience of top-notch food, drink and service is delivered in a casual yet refined environment.  Cure seats 40, including a chef’s table of eight, within the 1,350 sq ft shophouse space.</p>
             <p class="about_info" style="text-indent:25px;">It integrates his influences and inspirations from his many years of cooking in acclaimed Michelin star kitchens across Dublin, London and New York, and his firm belief in going back to the basics of hospitality: striving to take care of guests in the best way possible by offering them the best food, drink and service experience in an accessible and personable way.</p>
        </div>

CSS：

#menu{
    padding-top:20%;
    padding-bottom:20%;
}

#about{
    padding-top:22%;
    padding-bottom:22%;
}

Answer 1

您应该使用jquery根据屏幕大小处理更改。有两种有用的方法可以使用。

$(window).height(); //returns the height of the window
$(window).width(); //returns the width of the window

您可以检查屏幕大小并在页面加载时动态更改div的填充（试用和错误最有效）。您还可以在窗口调整大小时更改填充（或其他）。这样即使用户调整窗口大小，您的页面也会很好看。

$(window).resize(function() {
//this code will be executed when the window is re-sized
});

您可以使用.css（）更改给定here的元素的css属性。

Answer 2

你应该尝试使用vh CSS单元，它使用视口高度。

如果您需要跨浏览器兼容性：

试试这个：

    (function( $, window ){

  var $win = $(window)
      , _css = $.fn.css;

  function viewportToPixel( val ) {
    var percent = val.match(/\d+/)[0] / 100,
      unit = val.match(/[vwh]+/)[0];
    return (unit == 'vh' ? $win.height() : $win.width()) * percent + 'px';
  }

  function parseProps( props ) {
    var p, prop;
    for ( p in props ) {
      prop = props[ p ];
      if ( /[vwh]$/.test( prop ) ) {
        props[ p ] = viewportToPixel( prop );
      }
    }
    return props;
  }

  $.fn.css = function( props ) {
    var self = this,
        update = function() {
          return _css.call( self, parseProps( $.extend( {}, props ) ) );
        };
    $win.resize( update );
    return update();
  };

}( jQuery, window ));

$('div').css({
  height: '50vh',
  width: '50vw',
  marginTop: '25vh',
  marginLeft: '25vw',
  fontSize: '10vw'
});

工作演示：http://jsbin.com/izosuy/1/edit?js,output

在IE8中运行良好！

阅读此主题以获取更多信息：Is there any cross-browser javascript for making vh and vw units work

Answer 3

javascript可以做到。

使用 window.innerWidth 和 window.innerHeight ，您可以检索大小（以像素为单位）您网站的可见区域。

然后你做你的时髦计算来确定你的填充。并提交：

document.getElementById('menu').setAttribute('style', 'padding-top:'+varTop+'%; padding-bottom:'+varBot+'%');

请注意，您也可以使用“px”作为单位而不是“％”并设置'padding-top：123px;'

放在一起它可能看起来像这样：

<script>
setPadding();

function setPadding() {
    var varTop, varBot;
    varTop = window.innerHeight; //your calculations here
    varBot = window.innerHeight; //
    document.getElementById('menu').setAttribute('style', 'padding-top:'+varTop+'px; padding-bottom:'+varBot+'px;');
}
</script>

然后，只要调整窗口大小，就应该调用函数 setPadding （参见其他答案）。

检测屏幕大小并更改div填充中的百分比

3 个答案: