Question

目前这是我的想法的图像：

enter image description here

它周围的黑框是一个DIV标签，其样式如下：

#middlesection {
    height: 481px;
}

我有Calender，TITLE输入框，然后是底部的User Input框。

当您在日历上选择新月份时，如果该月份的天数较少，则会占用更少的空间，这意味着底部的输入框不再适合div

当我尝试将输入框设置为100％的高度时，它使用整个屏幕而不是DIV大小（即使它在DIV内部）

3控件的CSS：

#calender_control {
    width: 835px !important;
}

#txt_headernotes {
    width: 100%;
    text-align: center;
    border-width:1px;
    border-color: orange;  
}

#txt_displayinformation {
    width: 100%;
    height: 12.5%;
    border-width: 1px;
    border-color: orange;
}

如果压光机具有更多的天数，如果它会有更多的缩小，我怎样才能使底部的输入框保持在div的高度。

HTML code：

<div id="middlesection">
     <DayPilot:DayPilotMonth ID="calender_control" CssClassPrefix="bsimplexcalender"
      OnCommand="calender_control_Command" ContextMenuID="menu"   
      EventRightClickHandling="ContextMenu" EventRightClickJavaScript="select(e)" 
      BubbleID="DayPilotBubble1" ClientObjectName="dpm" runat="server" 
      Theme="bsimplexcalender" HeightSpec="Auto" Height="0" MinCellHeight="63" 
      DataStartField="start" DataEndField="end" DataTextField="name" DataValueField="id" 
      OnBeforeEventRender="calender_control_BeforeEventRender" />
     <input runat="server" id="txt_headernotes" placeholder="Notes" />
     <input runat="server" id="txt_displayinformation" />
</div>

Answer 1

这是一个使用jQuery的解决方案。文档准备就绪后，将调整文本区域以填充＆＃34;日历＆＃34;和＆＃34;标题＆＃34;部分。

  <div id="outer">
     <div id="calendar"></div>
     <div id="title"></div>
     <div id="variable">
        <textarea name="txt-test"></textarea>
     </div>
  </div>

  <script src="Scripts/jquery-1.10.2.min.js"></script>

  <script>
     function resizeTextArea() {
        var outerHeight = $('#outer').height();
        var calendarHeight = $('#calendar').height();
        var titleHeight = $('#title').height();

        $('#variable').each(function () {
           var textContainer = $(this);
           textContainer.height(outerHeight - (calendarHeight + titleHeight));
           textContainer.find('textarea').height(textContainer.height()).width(textContainer.width());
        });
     }

     $(function () {
        resizeTextArea();
     });

  </script>

还有一些测试CSS：

  <style>
     #outer {
        height: 480px;
        border: 2px solid black;
     }

     #calendar {
        height: 200px;
        background-color: blue;
     }

     #title {
        height: 40px;
        background-color: green;
     }

     #variable {
        background-color: red;
        overflow: hidden;
     }

        #variable textarea {
        }

  </style>

Answer 2

实现这一目标的一种方法是使用绝对定位。

由于您的div包装器具有设定的高度，因此不会导致任何意外问题。

<强> HTML

<div id="middlesection">
    <DayPilot:DayPilotMonth CssClassPrefix="bsimplexcalender" OnCommand="calender_control_Command" ContextMenuID="menu" EventRightClickHandling="ContextMenu" EventRightClickJavaScript="select(e)" BubbleID="DayPilotBubble1" ClientObjectName="dpm" runat="server" ID="calender_control" Theme="bsimplexcalender" HeightSpec="Auto" Height="0" MinCellHeight="63" DataStartField="start" DataEndField="end" DataTextField="name" DataValueField="id" OnBeforeEventRender="calender_control_BeforeEventRender" />
    <div id="INPUTBOX">
        <input runat="server" id="txt_headernotes" placeholder="Notes" />
        <input runat="server" id="txt_displayinformation" />
    </div>
</div>

<强> CSS

#middlesection{
    position:relative;
    padding-bottom:200px; /*Set to height of input*/
}    
#INPUTBOX {
    position:absolute;
    bottom:0;
    height:400px;
}

使用输入框填充剩余的DIV标签空间高度

2 个答案: