HTML、HEAD、BODY css 问题

标签 html css styling document-body laravel-4.2

我的页面目前存在问题,页面内容没有 100% 填满屏幕。 (拉维尔 4.2) See Image

我的代码如下

ma​​ster.blade.php

HTML/Javscript 代码:

<!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>

CSS 代码:

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;
}

我无法弄清楚问题是什么。如果有人有任何建议,我们将不胜感激

最佳答案

尝试通过将此添加到 css 来删除默认边距和填充:

*{
   maring:0;
   padding:0;
}

并且还用于计算宽度使用 vw 单位:

width:100vw;

关于HTML、HEAD、BODY css 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42794237/

相关文章:

javascript - jQuery 替换 html 标签和链接之外的内容

javascript - 将鼠标悬停在按钮显示的隐藏文本框上

javascript - 转动按钮可以用鼠标中键点击

javascript - 属性值更改后 IE8 不刷新类

javascript - 使用 css 或 JS 突出显示每行的第一个字符

javascript - 在 View 中垂直居中元素

css - 为什么我对表格的媒体查询在 chrome 而不是 firefox 中工作?

html - 可以根据序列中的索引为元素的背景着色吗?

android - 如何设计 Android Switch?

html - 垂直单元对齐