Question

我目前在页面上遇到问题，页面内容没有填满整个屏幕。（Laravel 4.2） See Image

我的代码如下

master.blade.php

HTML / Javscript代码：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Timetable</title>
    <link rel="icon" href="/images/calander.ico">

    <script src="/scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="/scripts/main.js" type="text/javascript"></script>
    <script src="/scripts/jquery-ui.min.js" type="text/javascript"></script>
    
    <link rel="stylesheet" href="/styles/default.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container script" style="display:none">
        @include('layouts.banner')
        @include('layouts.navigation')
    <div class="content">
        dasda
          
           @include('layouts.messages')
           @yield('content')
    </div>  
</div>
</body>
@yield('modal')
@yield('javascript')
<script type="text/javascript" id="cookiebanner" src="http://cookiebanner.eu/js/cookiebanner.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $('.script').attr('style', 'block');

        });
</script>
</html>

＆＃13;

CSS代码：

＆＃13;

html {
    overflow-x:hidden;
    height:100%;
}

.navigation {
  width:150px;
}

.container {
  width:100%;
  height:100%;
}

.content {
  background-color:#000000;
  top:-100px;
  width:100%;
  height:100%;
}

body {
    background: #F0EDED;
}

＆＃13;

我无法弄清问题是什么。如果有人有任何建议值得赞赏

Answer 1

尝试通过将此添加到css：

来删除默认边距和填充

*{
   maring:0;
   padding:0;
}

还用于计算宽度使用vw单位：

width:100vw;

Answer 2

尝试以这种方式更改body标签的css：

body {
    margin: 0;
    padding: 0;
    background: #F0EDED;
    height: 100%;
}

Answer 3

你不能使用

＆＃13;

html {
    overflow-x:hidden;
    height:100%;
}

＆＃13;

＆＃13; 使用： astrick（*）insted of html

Answer 4

html {
  height: 100%;
}
body {
  min-height: 100%;
}

HTML，HEAD，BODY css问题

4 个答案: