Ant-design: Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ 100% высоты ΠΌΠ°ΠΊΠ΅Ρ‚Π°

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 17 Ρ„Π΅Π²Ρ€. 2017  Β·  12ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: ant-design/ant-design

Π― Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Meteor JS .
Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ 100% высоту ΠΌΠ°ΠΊΠ΅Ρ‚Π° (экрана)

image

import React from 'react';
import {LocaleProvider} from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';
import {Layout, Menu, Icon, Breadcrumb} from 'antd';
const {Header, Sider, Content, Footer} = Layout;
import {Row, Col} from 'antd';
import {Dropdown} from 'antd';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

import {FlowRouter} from 'meteor/kadira:flow-router';

export default class App2 extends React.Component {
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    linkTo = (item) => {
        console.log(item);
        FlowRouter.go(item.key);
    };

    render() {
        const style = {
            logoImg: {
                width: "40px",
                marginRight: "8px"
            },
            logoTitle: {
                verticalAlign: "text-bottom",
                fontSize: "16px",
                textTransform: "uppercase",
                display: "inline-block",
            }
        };

        const menuHead = (
            <Menu>
                <Menu.Item>
                    <a rel="noopener noreferrer" href="http://www.alipay.com/">Profile</a>
                </Menu.Item>
                <Menu.Item>
                    <a rel="noopener noreferrer" href="http://www.taobao.com/">Logout</a>
                </Menu.Item>
            </Menu>
        );

        return (
            <LocaleProvider locale={enUS}>
                <Layout>
                    <Sider
                        trigger={null}
                        collapsible
                        collapsed={this.state.collapsed}
                    >
                        <div className="logo">
                            <img src="/antd-logo.svg" style={style.logoImg}/>
                            <span style={style.logoTitle}>
                                METEOR ANTD
                            </span>
                        </div>
                        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} onClick={this.linkTo}>
                            <Menu.Item key="App.home">
                                <Icon type="home"/>
                                <span className="nav-text">Home</span>
                            </Menu.Item>
                            <Menu.Item key="App.form">
                                <Icon type="video-camera"/>
                                <span className="nav-text">Form</span>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <Icon type="upload"/>
                                <span className="nav-text">nav 3</span>
                            </Menu.Item>

                            <SubMenu key="sub1" title={<span><Icon type="mail"/><span>Navigation One</span></span>}>
                                <Menu.Item key="4">Option 1</Menu.Item>
                                <Menu.Item key="5">Option 2</Menu.Item>
                                <Menu.Item key="6">Option 3</Menu.Item>
                            </SubMenu>

                            <SubMenu key="sub2" title={<span><Icon type="mail"/><span>Navigation One</span></span>}>
                                <MenuItemGroup title="Item 1">
                                    <Menu.Item key="7">Option 1</Menu.Item>
                                    <Menu.Item key="8">Option 2</Menu.Item>
                                </MenuItemGroup>
                                <MenuItemGroup title="Item 2">
                                    <Menu.Item key="9">Option 3</Menu.Item>
                                    <Menu.Item key="10">Option 4</Menu.Item>
                                </MenuItemGroup>
                            </SubMenu>
                        </Menu>
                    </Sider>

                    <Layout>

                        <Header style={{background: '#fff', padding: 0}}>
                            <Row>
                                <Col span={12}>
                                    <Icon
                                        className="trigger"
                                        type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                        onClick={this.toggle}
                                    />
                                </Col>
                                <Col span={12}>
                                    <Dropdown overlay={menuHead} placement="bottomRight">
                                        <a className="ant-dropdown-link" href="#">
                                            Username <Icon type="down"/>
                                        </a>
                                    </Dropdown>
                                </Col>
                            </Row>
                        </Header>

                        <Content style={{margin: '0 16px'}}>
                            <Breadcrumb style={{margin: '12px 0'}}>
                                <Breadcrumb.Item>Home</Breadcrumb.Item>
                                <Breadcrumb.Item>List</Breadcrumb.Item>
                                <Breadcrumb.Item>App</Breadcrumb.Item>
                            </Breadcrumb>

                            <div style={{background: '#fff', padding: 24, minHeight: 360}}>

                                {this.props.content}

                            </div>

                        </Content>

                        <Footer style={{textAlign: 'center'}}>
                            Ant Design Β©2016 Created by Ant UED
                        </Footer>

                    </Layout>
                </Layout>
            </LocaleProvider>
        );
    }
}

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для мСня:
<Layout style={{height:"100vh"}}>

ВсС 12 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Команда Ant Design ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ GitHub для отслСТивания ошибок ΠΈΠ»ΠΈ обсуТдСния ΠΏΠ»Π°Π½ΠΎΠ² Ant Design. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, поТалуйста, Π½Π΅ Π·Π°Π΄Π°Π²Π°ΠΉΡ‚Π΅ здСсь вопросов ΠΎΠ± использовании. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‚ΡŒ вопросы Π² Stack Overflow ΠΈΠ»ΠΈ Segment Fault , Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ своим вопросам Ρ‚Π΅Π³ΠΈ antd ΠΈ react . Бпасибо Π·Π° сотрудничСство!

Извини спасибо

@thearabbit Π’Ρ‹ размСстили свой вопрос ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ Π½Π° Π½Π΅Π³ΠΎ ΠΎΡ‚Π²Π΅Ρ‚? ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ ссылкой, Ссли Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. Бпасибо

Π΅ΡΡ‚ΡŒ новости ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ?

БСйчас ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ

    state = {
        windowHeight: window.innerHeight
    };

    componentDidMount() {
        window.addEventListener('resize', this.handleResize);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize);
    }

    handleResize = (e) => {
        this.setState({windowHeight: window.innerHeight})
    };
------------
render(){
           const minHeight = this.state.windowHeight - 172;
           return (
                            <div id="container" style={{background: '#fff', padding: 24, minHeight: minHeight}}>
                                {children}
                            </div>

Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для мСня:
<Layout style={{height:"100vh"}}>

Π’ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° ΠΏΡ€ΠΈ Ρ€ΡƒΡ‡Π½ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΎΠΊΠΎΠ½?

Π”Π°, @thearabbit Π΅ΡΡ‚ΡŒ

Π’ΠΎ, Ρ‡Ρ‚ΠΎ я сдСлал, ΠΈΠΌΠ΅Π΅Ρ‚ смысл:

bodyStyle={{ height: "100vh", overflow: "auto" }}

Команда Ant Design ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ GitHub для отслСТивания ошибок ΠΈΠ»ΠΈ обсуТдСния ΠΏΠ»Π°Π½ΠΎΠ² Ant Design. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, поТалуйста, Π½Π΅ Π·Π°Π΄Π°Π²Π°ΠΉΡ‚Π΅ здСсь вопросов ΠΎΠ± использовании. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‚ΡŒ вопросы Π² Stack Overflow ΠΈΠ»ΠΈ Segment Fault , Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ своим вопросам Ρ‚Π΅Π³ΠΈ antd ΠΈ react . Бпасибо Π·Π° сотрудничСство!

Π― Π΄ΡƒΠΌΠ°ΡŽ, Ρ‚Π΅Π±Π΅ слСдуСт ΠΏΡ€ΠΎΡΠ²ΠΈΡ‚ΡŒ ΡƒΠ²Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ Π²ΠΎΠΏΡ€ΠΎΡˆΠ°ΡŽΡ‰Π΅ΠΌΡƒ

Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠ°ΠΊΠΎΠ΅-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ класса для высоты 100%? НапримСр, Π² бутстрапС Π΅ΡΡ‚ΡŒ класс h-100 для высоты 100%.

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ