Question

我试图自己解决这个问题，它在一定程度上起作用。

我使用了最小和最大宽度的组合，overflow：hidden和display：inline-block。它停止收缩，但它会改变导航下的内容。我尝试设置边距和一个空的空间持有人，但没有骰子。

基本上代码工作得很好。收缩窗口时，它会移动导航栏下的内容。

HTML -

<body>

    <div class="container">
        <header>  
            fghgfhnjgfhgnfhhfggh
        </header>

        <nav>
            <div id="logo"> 
                <img  src="Images/Logo.png" >
            </div>                  

            <ul>
                <li>
                    <a href="#">
                        <i class="fa fa-home fa-2x"></i>
                        <span class="nav-text">
                            Dashboard
                        </span>
                    </a>                      
                </li>
                <li class="has-subnav">
                    <a href="#">
                        <i class="fa fa-laptop fa-2x"></i>
                        <span class="nav-text">
                            UI Components
                        </span>
                    </a>
                </li>
                <li class="has-subnav">
                    <a href="#">
                        <i class="fa fa-list fa-2x"></i>
                        <span class="nav-text">
                            Forms
                        </span>
                    </a>
                </li>
                <li class="has-subnav">
                    <a href="#">
                        <i class="fa fa-folder-open fa-2x"></i>
                        <span class="nav-text">
                            Pages
                        </span>
                    </a>

                </li>
            </ul>
        </nav>
        <div class="content">
            <div class="small-box">
            </div>

            <div class="small-box">
            </div>
        </div>
        <footer> 
            rueregrewghe
        </footer>
    </div>          
</body>

css -

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);

html, body{
height:100%;
width:100%;
background: rgb(110, 110, 110);
padding:0;
margin:0;
min-width:1079px;
overflow:hidden;

}
.container{
        margin-left:auto;
    margin-right:auto;

background: rgb(110, 110, 110);
width: 100%;
min-width:1079px;
height: 100%;
display: inline-block;
}
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}
header{
position:absolute;
   top:0;
   right:0;
   width:calc(100% - 60px);
   min-width:1270px;
   height:108px; 
   background:rgb(57, 57, 57);

}
nav {
background:rgb(255, 90, 9);
position:fixed;
top:0;
height:calc(100% - 50px);
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .1s ease;
 transition-property:width .1s ease;
-webkit-transform:translateZ(0) scale(1,1);
float:left;
z-index:100;
 margin-right:140px;
}

nav:hover{
width:200px;
 transition-property:width .1s ease;

}
nav li {
position:relative;
display:block;
width:250px;
}
nav li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#efefef;
 font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
margin-top:110px;
}
nav .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
nav .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
  font-family: 'times new roman', sans-serif;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
footer{
position:absolute;
   bottom:0;
   left:0;
   width:100%;
   height:50px; 
   background:rgb(57, 57, 57);
    min-width:1079px;
}
.content{
color:black;
float:right;
margin-top:108px;
top:0;
height:calc(100% - 158px);
position:absolute;
width:50%;
min-width:1150px;
margin-left:calc((100% - 1200px) /2);
padding:10px;

background-color:green;
overflow:hidden;
}
.small-box{
    float:left;
    margin-left:100px;
    width:435px;
    height:100%;
    background-color:yellow;

}

Answer 1

首先，您使用的是display：table-cell，但没有定义表或表行。这可能会有所帮助：enter link description here

其次，你要混合花车以及绝对/相对位置。相对元素根据某个元素定位并调整其位置。在这种情况下，它的位置基于标题的位置。内容绝对定位，因此不会像导航那样进行调整。

停止垂直导航下的内容移动

1 个答案: