Css 页脚没有响应_Css_Html_Responsive Design

Css 页脚没有响应

css html responsive-design

Css 页脚没有响应,css,html,responsive-design,Css,Html,Responsive Design,我试图使我的应用程序响应，但我有一个问题，因为页脚是不响应。我读过这篇文章，但这篇文章对我不起作用 <body> <div id="wrap"> <div id="top"> @include('includes.top') </div> <div id="left"> @include('includes.left')

我试图使我的应用程序响应，但我有一个问题，因为页脚是不响应。我读过这篇文章，但这篇文章对我不起作用

<body>
    <div id="wrap">
        <div id="top">
            @include('includes.top')
        </div>
        <div id="left">
            @include('includes.left')
        </div>
        <div id="content">
            @yield('content')
        </div>
        <div id="right">

        </div>
        <div id="footer">
            @include('includes.footer')
        </div>
    </div>
</body>

您发布的链接（评论中）中的代码没有按照您的方式实现它

你的html应该是（根据那篇文章）

在

上演示这段代码，你能定义“响应”吗？你想让它做什么？它到底在做什么？jsfiddle或它没有发生：-）再加上@FDL问题，你的内容分区占据了100%的高度，小心；）就像他解释问题一样。我想将页脚推到页面底部，使“表”的高度100%换行，然后将

display:table行中的所有直接子div-
html,
body { height: 100%; }
body {
  display: table;
  width: 100%;
}
#footer {
  display: table-row;
  height: 1px;
}
#content { height: 100%; }

<body>
    <div id="wrap">
        <div id="top">
            @include('includes.top')
        </div>
        <div id="left">
            @include('includes.left')
        </div>
        <div id="content">
            @yield('content')
        </div>
        <div id="right">

        </div>
    </div>
    <div id="footer">
        @include('includes.footer')
    </div>
</body>

html,
body { height: 100%; }
body {
  display: table;
  width: 100%;
}
#footer {
  display: table-row;
  height: 1px;
}
#wrap{ display: table-row; height: 100%; }