如何适合不同屏幕尺寸的React ant设计侧边栏高度

时间：2018-10-04 10:26:27

标签： css reactjs sidebar antd

我在反应蚂蚁设计中使用了补充工具栏，并且在使用@media查询来使我的应用程序响应不同的屏幕尺寸。但是，我无法使侧栏适合屏幕的长度。有任何想法吗？下面是我的代码。

------------ App.js -------------- 

    import React, { PropTypes } from "react";
    import { Layout, Menu, Icon, Card } from "antd";
    import SideBar from "./common/SideBar";
    import MainMenu from "./common/MainMenu";
    import routes from "./routes";
    const { Header, Content } = Layout;
    import axios from "axios";
    import DashCard from "./common/DashCard";
    import Dashboard from "./components/Dashboard";
    import Styles from "./styles/styles.less";
    import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
    import AdminPage from "./components/Admin/AdminPage";
    import LoginPage from "./components/Login/LoginPage";

export default class App extends React.Component {

  render() {
    return (

      <Router>
        <div id="App" style={{ height: "fit-content" }}>

          <Layout style={{ minHeight: "" }}>
            <meta name="viewport"
                  content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86"/>
            <Header className="header">
              <div className="logo"/>
              <MainMenu/>
            </Header>

            <div className="test">
              <Switch>
                <Route exact path='/' component={LoginPage}/>
                <Route path='/admin' component={AdminPage}/>
                <Route path='/home' component={SideBar}/>
              </Switch>
            </div>
          </Layout>
        </div>
      </Router>
    );
  }
}

------------ Sidebar.js -------------- 

import React, { Component, PropTypes } from "react";
import ReactDOM from "react-dom";
import { Layout, Menu, Icon, Button } from "antd";
import axios from "axios/index";
import Dashboard from "../components/Dashboard";
import DashCard from "./DashCard";
import App from "../../src/App";

const { Header, Content } = Layout;
const { SubMenu } = Menu;
const { Sider } = Layout;

export default class SideBar extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      envName: "production",
      env: {},
      servicesArray: [],
      groupArray: [],
      clickStatus: false

    };
    this.getServices = this.getServices.bind(this);
    this.selectEnv = this.selectEnv.bind(this);
  }

  selectEnv({ item, key }) {       
    let that = this;
    that.setState({ servicesArray: [] });
    that.setState({ clickStatus: true });

    this.setState(prevState => {
      return ({
        envName: key,
        servicesArray: [],
        selectedValues: []
      });
    });    

    this.getServices(key);

  }

  componentDidMount() {
    this.getServices(this.state.envName);
  }

  getServices(envname) {

    let that = this;
    this.setState({ servicesArray: [] });

    const env = {
      envName: envname
    };

    axios.post("http://localhost:8080/load/serviceList", env)
      .then(res => {
        res.data.push("Mastering");
        this.setState(prevState => {
          return ({
            servicesArray: res.data
          });
        });

      });

    this.setState({ servicesArray: [] });        
  }


  render() {


    return (

      <Layout>
        <Sider width={200} style={{ background: "#fff" }} breakpoint="sm" collapsedWidth="0">
          <Menu
            className="sidebar"
            onClick={this.selectEnv}
            mode="inline"
            defaultSelectedKeys={["staging"]}
            defaultOpenKeys={["sub1"]}
            style={{ borderRight: 0, display: "block", backgroundColor: "#6F9B9A", opacity: "0.5" }}

          >
            <Menu.Item key="ppe" style={{ borderRadius: "0 5px 5px 0" }}>        
              <span>PPE</span>
            </Menu.Item>
            <Menu.Item key="production" style={{ borderRadius: "0 5px 5px 0" }}>    
              <span>Production</span>
            </Menu.Item>
            <Menu.Item key="staging" style={{ borderRadius: "0 5px 5px 0" }}>          
              <span>Staging</span>
            </Menu.Item>

          </Menu>
        </Sider>
        <Layout style={{}}>
          <Content className="appDashCard">
            <DashCard title="Card title" status={this.state.clickStatus} env={this.state.servicesArray}
                      envName={this.state.envName}>Card
              content</DashCard>
          </Content>
        </Layout>
      </Layout>
    );
  }

}

------------ styles.less -------------- 

//For mobile
@media only screen and (max-width: 768px) {
  .sidebar{
    height: 100%;
  }

  .imageLogin{
    padding: 25%;
    opacity: 0.9;
    height:100%;
    background:#fff;
    background-color: #6f9b9a;
  }

  .loginDiv{
    opacity:0.7;
    margin: auto;
    padding-right: 20px;
    padding-top: 40px;
    border-radius: 10px ;
    border: 2px solid black;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.28);

  }

  #btnLogin{
    marginTop: 30px;
    margin-left: 30px;
    width: 10px;
    margin-bottom: 20px;
  }

  .loginBtn{
    margin-left: 5px;
    background-color: rgba(5, 9, 46, 0.94);
  }



  #btn {
    margin-top:50px;
    width: 8%;
    align-self: center;
  }

  .groupDiv{
    width: 300px;
    position: absolute;
    margin-top: 80px;
    margin-left: -130%;
  }

  .hostDiv{
    width: 300px;
    position: absolute;
    margin-top: 160px;
    margin-left: -250%;
  }

  .diciplineDiv{
    width: 300px;
    position: absolute;
    margin-top: 240px;
    margin-left: -365%;
  }

  Button {
    width: 1000%;
    margin-bottom: 10px;
  }

  Input {
    align-self: center;
    width: 250px;
  }

  h4 {
    color: #5400ff;
  }

  .select{
    width: 300px;
  }


  .appDashCard {
    background: #fff;
    padding: 10%;
    align-content: center;
  }

  .switch{
    margin-top: 320px;
    position: relative;
  }
}


//For tabs
@media only screen and(max-width: 991px) and (min-width: 768px){

  .sidebar{
    height: 100%;
  }

  .imageLogin{
    padding: 10%;
    opacity: 0.9;
    height:100%;
    background:#fff;
    background-color: #6f9b9a;
  }

  .loginDiv{
    opacity:0.7;
    margin: auto;
    padding-top: 40px;
    border-radius: 10px ;
    border: 2px solid black;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.28);

  }

  #btnLogin{
    marginTop: 30px;
    margin-left: 45px;
    width: 100px;
    margin-bottom: 20px;
  }

  .loginBtn{
    margin-left: 5px;
    background-color: rgba(5, 9, 46, 0.94);
  }


  #btn {
    margin-top:350px;
    width: 8%;
    margin-left: 10px;  
    align-self: center; 
  }

  .groupDiv{
    width: 300px;
    position: absolute; 
    margin-top: 60px;   
    margin-left: -240%;   
  }

  .serviceDiv{
    margin-top: -40%;
    margin-left: -45%;
  }

  .hostDiv{
    width: 300px;
    position: absolute;  
    margin-top: 140px;  
    margin-left: -435%;  
  }

  .diciplineDiv{
    width: 300px;
    position: absolute;  
    margin-top: 220px;   
    margin-left: -635%;
  }

  Button {
    width: 500%;
    margin-bottom: 10px;
  }

  Input {
    margin-left: 0px;    
    width: 250px;
  }

  h4 {
    color: #18ff1b;
  }

  .select{
    width: 300px;
  }


  .appDashCard {
    background: #fff;
    padding: 10%;
    align-content: center;
  }

  .switch{
    margin-top: -20px;
    position: relative;
    margin-left: 80%;
  }
}



@media only screen and(max-width: 1254px) and (min-width: 992px){
  .sidebar{
    height: 100%;
  }

  .imageLogin{
    padding: 10%;
    opacity: 0.9;
    height:100%;
    background:#fff;
    background-color: #6f9b9a;

  }

  .loginDiv{
    opacity:0.7;
    margin: auto;
    padding-top: 40px;
    border-radius: 10px ;
    border: 2px solid black;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.28);

  }

  #btnLogin{
    marginTop: 30px;
    margin-left: 45px;
    width: 133px;
    margin-bottom: 20px;
  }

  .loginBtn{
    margin-left: 5px;
    background-color: rgba(5, 9, 46, 0.94);
  }




  #btn {
    margin-top:350px;
    width: 8%;
    margin-left: -20px;    
    align-self: center;
  }

  .groupDiv{
    width: 300px;
    position: absolute; 
    margin-top: 60px; 
    margin-left: -200%;   
  }

  .serviceDiv{
    margin-top: -40%;
    margin-left: -45%;
  }

  .hostDiv{
    width: 300px;
    position: absolute; 
    margin-top: 160px; 
    margin-left: -350%;

  }

  .diciplineDiv{
    width: 300px;
    position: absolute;
    margin-top: 260px;  
    margin-left: -500%;
  }

  Button {
    width: 500%;
    margin-bottom: 10px;
  }

  Input {
    margin-left: 0px;  
    width: 250px;
  }

  h4 {
    color: #f814ff;
  }

  .select{
    width: 300px;
  }


  .appDashCard {
    background: #fff;
    padding: 10%;   
    align-content: center;
  }

  .switch{
    margin-top: -40px;
    position: relative;
    margin-left: 75%;
  }
}

//Laptop Screens
@media only screen and(max-width: 1400px) and (min-width: 1255px){

  .sidebar {  
    position:absolute;
    height:100%;
    top:0;
    right:0;
    bottom:0;
    left:0;

  }

  .imageLogin{
    padding: 8%;
    opacity: 0.8;
    height:100%;    
    background:#fff;
    background-color: #439b8e;

  }

  .loginDiv{
    opacity:1;
    margin: auto;
    padding-top: 40px;
    border-radius: 10px ;
    border: 2px solid black;
    text-align: left;
    background-color: rgba(252, 252, 254, 0.28);

  }

  #btnLogin{
    marginTop: 30px;
    margin-left: 45px;
    width: 133px;
    margin-bottom: 20px;
  }

  .loginBtn{
    margin-left: 5px;
    background-color: rgba(5, 9, 46, 0.97);
  }

  .hostDiv{
    width: 300px;
    position: absolute;   
    margin-left: -40px;
  }

  .groupDiv{
    margin-left:-20px;
    margin-top: 0px;   
  }

  .diciplineDiv{
    width: 300px;
    position: absolute; 
    margin-left: -60px;
  }

  .switch{
    margin-top: 0px;
    position: absolute;
    margin-left: 79%;
  }

  .buttons {
    margin-top:150px;
    width: 200%;
    margin-left: 45px; 
  }

  Button {
    width: 100px;
    margin-right: 5%;
  }

  h4 {
    color: rgba(255, 35, 62, 0.97);
  }

  .appDashCard {
    height: 100%;
    background: #fff;
    padding: 20px; 
  }

  .select {
    width: 200px;
  }
}


//Desktop Screens
@media only screen and(min-width: 1400px){

  .sidebar{
    height: 255%; 
  }

  .imageLogin{
    padding: 10%;
    opacity: 0.8;
    height:1000px;
    background:#fff;
    background-color: #6f9b9a;
  }

  .loginDiv{
    opacity:1;
    margin: auto;
    padding-top: 40px;
    border-radius: 10px ;
    border: 2px solid black;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.28);

  }

  .hostDiv{
    width: 300px;
    position: absolute; 
    margin-left: -40px;
  }

  .groupDiv{
    margin-left:-20px;
    margin-top: 0px;
   }

  .diciplineDiv{
    width: 300px;
    position: absolute; 
    margin-left: -60px;
  }

  .switch{
    margin-top: 0px;
    position: absolute;
    margin-left: 78%;
  }

  .buttons {
    margin-top:150px;
    width: 200%;  
    margin-left: 70px;  
  }

  Button {
    width: 100px;
    margin-right: 5%;
  }

  #btnLogin{
    marginTop: 30px;
    margin-left: 45px;
    width: 133px;
    margin-bottom: 20px;
  }

  .loginBtn{
    margin-left: 5px;
    background-color: rgba(5, 9, 46, 0.94);
  }

  h4 {
    color: rgba(5, 9, 46, 0.97);
  }

  .appDashCard {
    background: #fff;
    padding: 24px;
  }

  .select {
    width: 200px;
  }
}

1 个答案:

答案 0 :(得分：2)

下面的代码对我有用：只需为Layout添加高度
<Layout style={{height:"100vh"}}>

相关问题
最新问题