Question

我有一个标题，主要，旁边和页脚元素。主要是我的内容，旁边是右边，它应该是一个侧边栏。它们是屏幕宽度的20-80%。

我想暂时给出200px min-width，但是如果20%位于200px之下，我怎样才能告诉主要内容自我调整并为我提供足够的空间？< / p>

我的问题不是如何扩展div的空间以占用剩余的宽度，而只是在我的旁边因为20％的宽度而在200px以下时保留剩余的宽度。

    <body>
        <header id="main-header">
            it's 100%
        </header>
        <main>
            it's 80%, display: inline-block;
            need to be resized if 20% is under 200px
            <div id="main-content">
                it's 100%
            </div>
        </main>
        <aside id="right-content">
            its 20%, display: inline-block; min-width: 200px;
        </aside>
        <footer id="main-footer">
            it's 100%
        </footer>
    <body>

Css代码：

*{
    overflow: hidden;   

}

body{
    background-color: rgb(44, 36, 22);
    padding: 0px;
    margin: 0px;
}

#main-header{
    background-color: rgb( 69, 56, 35); 
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 40px;
    z-index: 5;
}

body main{
    box-sizing: border-box;
    width: 80%;
    display: inline-block;
}
#main-content{
    box-sizing: border-box;
    display: inline-block;
    background-color: rgb(44, 36, 22);
    color: white;
    overflow: auto;
    width: 100%;
    min-height: 500px;
    float: left;
    border: 2px solid white;

}

#right-content{
    box-sizing: border-box;
    display: inline-block;
    margin: 1px solid white;
    width: 20%;
    min-width: 200px;
    float: right;
    border: 2px solid white;
    height: 100px;
}

除了最小宽度：200px时，Css主标签调整大小

0 个答案: