如何将div扩展到整个页面?

时间:2019-06-12 06:11:13

标签: html css reactjs

我正在尝试为我的React应用程序中的页面设置背景颜色。我想将背景色设置为延伸到整个页面的长度和宽度,但是我不能这样做,对于超出范围的表格或表格,我将高度/宽度或最小高度/最小宽度设置为100%,我得到了结果较大的内容,但较小的内容,我得到这个:

我要整个页面都变成蓝色。

enter image description here

这是我的css文件

.body
{
   margin:0px 0px 0px 0px;
   background-color:#4086ef;
   padding:10px;
   height:100%;
   width:100%;
}

如果我将高度设置为100vh,我会得到不想要的结果,但是内容超出了页面。

(内容呈现是动态的,所以我不知道什么时候内容会超出范围,什么时候不超出范围。)

编辑: 压缩窗口时,表格不会挤压,溢出的部分也不会跟随背景颜色,但高度也不会跟随背景颜色。

3 个答案:

答案 0 :(得分:5)

您只需要添加OnTokenValidated。这样它将覆盖整个屏幕。

答案 1 :(得分:0)

尝试一下

this.setState({ key: value }, function() {
    // Do Something Here After State is Updated
    yourFunction();
});
* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

div {
    background: red;
    color: white;
    min-height: 100vh;
    padding: 10px;
}

答案 2 :(得分:-1)

您可以使用: import React from "react"; import ReactDOM from "react-dom"; import {connect, Provider} from 'react-redux' import { createStore } from 'redux' import "./styles.css"; const MemoComponent = React.memo(function MyMemo() { return <div>Memo</div>; }); const ConnectedComponent = connect(null,null)(function MyConnected() { return <div>ReduxConnectComponent</div>; }) const store = createStore(()=>{},{}) function App() { return ( <Provider store={store}> <MemoComponent /> <ConnectedComponent/> </Provider> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);