Question

我有一个带边框的Div我需要在我的Div中显示，其宽度为100％，其中包含一个徽标图像和一些按钮。现在根据我的要求，我必须显示带边框的第二个Div在第一个Div的最后一个按钮结束之后的完整网页高度。带有边框的整体My Div应该显示为具有边框的Vertical Div，从第一个Div的100％宽度到100％高度的剩余空间（整页）但不显示就像那样。它会像水平一样显示......这是我用于First Div的CSS ......

.verticalDiv
{
 position:relative;
 height:auto;
 width:  100%;
}

这里是小提琴链接.. FIDDLE。请帮我按照垂直顺序正确显示..谢谢..

Answer 1

如果我理解你，请查看以下内容

＆＃13;

#full{

border:red dashed 2px;
  width:100%;
    height:100%;

}

#small{

border:green dashed 2px;
  width:200px;
    height:400px;

}

button
{
display:block
  
}

＆＃13;

<div id="full">
  <div id="small">
    this is my left menu :D
    <button>button1</button>
    <button>button1</button>
    <button>button1</button>
    <button>button1</button>
    <button>button1</button>
    <button>button1</button>
  
  </div>
  </div>

＆＃13;

Answer 2

演示 - http://jsfiddle.net/victor_007/2moq4t1y/4/

您需要计算height 100px是否需要更改尺寸增加的导航按钮和徽标

#Computationdiv {
    height: calc(100% - 100px); 
    border: 2px solid;
    border-radius: 25px;
}

并且所有heights都应为100%

html, body {
    height:100%;
}

.verticalDiv {
    height:100%;
}

＆＃13;

    html,
    body {
      height: 100%;
    }
    .verticalDiv {
      position: relative;
      height: 100%;
      width: 100%;
    }
    #Computationdiv {
      height: calc(100% - 100px);
      border: 2px solid;
      border-radius: 25px;
    }
    button {
      margin-left: 15px;
      vertical-align: top;
      font-size: 20px;
    }

＆＃13;

<div id="verticalDiv" class="verticalDiv">
  <img src="img/hotelAwadh.png" alt="logo" />
  <button id="Front Desk">Front Desk</button>
  <button id="Restaurent">Restaurent</button>
  <button id="HouseKeeping">House Keeping</button>
  <button id="TravelDesk">Travel Desk</button>
  <button id="Audit">Audit</button>
  <button id="Report">Report</button>
  <div id="Computationdiv"></div>
</div>

＆＃13;

如何垂直显示Div，高度和边界为100％

2 个答案: