मेरे कोड और तर्क से, सब कुछ सही लगता है। क्यों पृथ्वी पर मेरी खबर मेरे बॉक्स डी पर अतिप्रवाह होगी, जहां सभी बटन हैं। यह सिर्फ मेरे लिए कोई मतलब नहीं है।

यहाँ समस्या का एक चित्र है:

enter image description here

* {
  font-family: Segoe UI;
  font-size: 9pt;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  padding: 0;
  margin: 0;
  background-color: #bbc3cb;
  width: 100%;
  height: 100%;
}
#main {
  border: 1px solid rgb(112, 112, 112);
  width: 800px;
  height: 650px;
  margin: 0 auto;
}
#boxA {
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 3px;
  border-bottom: 1px solid rgb(180, 180, 180);
  background: #FFF;
}
#boxB {
  height: 573px;
  width: 200px;
  border: 0;
  float: left;
  background: #FFF;
}
#boxC {
  background: rgb(240, 240, 240);
  height: 573px;
  width: 598px;
  border-left: 1px solid rgb(180, 180, 180);
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  display: inline-block;
}
#boxD {
  background: rgb(240, 240, 240);
  border-top: 1px solid rgb(180, 180, 180);
  height: 44px;
  text-align: center;
  display: table;
  width: 100%;
  ;
}
#menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#menu li {
  padding: 4px;
  border: 1px solid #FFF;
}
#menu li:hover {
  cursor: pointer;
}
.selected {
  background: rgb(51, 153, 255);
  color: #FFF;
  border: 1px solid #FFF;
  font-weight: bold;
}
.hidden {
  display: none;
}
.item {
  width: 100%;
  height: 100%;
}
input[type="button"] {
  cursor: pointer;
  border: 1px solid #707070;
  background-color: #F0F0F0;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
  background-image: -ms-linear-gradient(top, #F1F1F1 0%, #E3E3E3 50%, #D0D0D0 100%);
  padding: 3px 6px;
  width: 75px;
}
input[type="button"]:hover {
  cursor: pointer;
  background-color: #EAF6FD;
  border: 1px solid #3C7FB1;
  box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
}
input[type="button"][disabled],
input[type="button"][disabled]:hover {
  border: 1px solid #ADB2B5;
  text-shadow: 1px 1px #fff;
  cursor: default;
  background-color: #F4F4F4;
  box-shadow: inset 0 1px 2px #fff;
}
div.frameT {
  width: 100%;
  padding: 0;
  display: table;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}
div.frameTC {
  padding: 0;
  vertical-align: middle;
  display: table-cell;
  margin: 0;
}
.section-title {
  padding: 0;
  margin: 0;
  color: rgb(11, 63, 113);
  font-weight: bold;
}
#news {
  overflow-y: scroll;
  height: 100%;
  margin-bottom: 5px;
  border: 1px solid red;
  display: block;
}
<div class="frameT">
  <div class="frameTC">



    <div id="main">

      <div id="boxA"><b>Application Title</b>
      </div>

      <div id="boxB">
        <ul id="menu">
          <li data-show="#1">Notes and Updates</li>
          <li data-show="#2">Menu Item 2</li>
          <li data-show="#3">Menu Item 3</li>
        </ul>
      </div>

      <div id="boxC">
        <div id="1" class="hidden item">

          <span class="section-title">Notes and Updates</span>

          <br>

          <div id="news"></div>

        </div>
        <div id="2" class="hidden item">
          Content Tab 2
        </div>
        <div id="3" class="hidden item">
          Content Tab 3
        </div>
      </div>

      <div id="boxD">

        <div style="display: table-cell; vertical-align: middle;">
          <input type="button" value="Search" class="btn" disabled>
          <input type="button" value="Save" class="btn" disabled>
          <input type="button" value="Add" class="btn" disabled>
          <input type="button" value="Clear All" class="btn">
          <input type="button" value="Delete" class="btn" disabled>
          <input type="button" value="Export" class="btn" disabled>
          <input type="button" value="Recall" class="btn" disabled>
        </div>

      </div>
      <!-- End of Main -->


    </div>
  </div>
4
BobbyJones 16 नवम्बर 2015, 21:30

3 जवाब

सबसे बढ़िया उत्तर

ऊंचाई और चौड़ाई हमेशा माता-पिता के सापेक्ष होती है। इस स्थिति में, आपका news div boxC जितना लंबा होगा। चूंकि आपके पास एक शीर्षक है, इसलिए इस खंड की ऊंचाई आपके शीर्षक के लिए news + ~ 20px के लिए माता-पिता की 100% होगी।

मेरा सुझाव इस तरह display:inline-block और height:20px का उपयोग करके अपने शीर्षक को एक विशिष्ट ऊंचाई निर्धारित करना है:

.section-title {
    padding: 0;
    margin: 0;
    color: rgb(11, 63, 113);
    font-weight: bold;
    height: 20px;
    display: inline-block;
}

तो आपको पता है कि यह हर ब्राउज़र पर किस आकार का होगा। अब आप इस तरह height:calc(100>% - 20px) अपने बॉक्स की ऊंचाई निर्धारित करने के लिए CSS3 calc फ़ंक्शन का उपयोग कर सकते हैं:

#news {
    overflow-y: scroll;
    height: calc(100% - 20px);
    margin-bottom: 5px;
    border: 1px solid red;
    display: block;
}

आप इसे फ़िडल देख सकते हैं

1
service-paradis 16 नवम्बर 2015, 18:51

आपका समाचार div 100% है, लेकिन आपके पास यह भी है:

<span class="section-title">Notes and Updates</span>

जो कुछ जगह ले रहा है। आप समाचार div (आकार छोटा है) का आकार बदल सकते हैं, हो सकता है कि किसी अन्य div में टैग 10% हो और समाचार div को 90% बना सके

ETA - या आप कंटेनर div अतिप्रवाह-y संपत्ति को छिपाना या स्क्रॉल करना चाहते हैं।

1
Nunchy 16 नवम्बर 2015, 18:36

यह आसान है, बस ऐसा करने के लिए अतिप्रवाह: ऑटो का उपयोग करें। अपना उदाहरण देखें:

* {
    font-family: Segoe UI;
    font-size: 9pt;
    box-sizing: border-box;
}
html {
    height:100%;
}
body {
    padding: 0;
    margin: 0;
    background-color: #bbc3cb;
    width: 100%;
    height: 100%;
}
#main {
    border: 1px solid rgb(112,112,112);
    width: 800px;
    height: 650px;
    margin: 0 auto;
}
#boxA {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 3px;
    border-bottom: 1px solid rgb(180,180,180);
    background: #FFF;
}
#boxB {
    height: 573px;
    width: 200px;
    border: 0;
    float: left;
    background: #FFF;
}
#boxC {
    background: rgb(240,240,240);
    max-height: 573px;
    width: 598px;
    border-left: 1px solid rgb(180,180,180);
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
    display: inline-block;
  overflow:auto;
}
#boxD {
    background: rgb(240,240,240);
    border-top: 1px solid rgb(180,180,180);
    height: 44px;
    text-align: center;
    display: table;
    width: 100%;;
}
#menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#menu li {
    padding: 4px;
        border: 1px solid #FFF;
}
#menu li:hover {
    cursor: pointer;
}
.selected {
    background: rgb(51,153,255);
    color: #FFF;
    border: 1px solid #FFF;
    font-weight: bold;
}
.hidden{ display:none; }


.item {
    width: 100%;
    height: 100%;
}


input[type="button"] 
{
  cursor:pointer; 
  border: 1px solid #707070;
  background-color: #F0F0F0;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
  background-image: -ms-linear-gradient(top, #F1F1F1 0%, #E3E3E3 50%, #D0D0D0 100%);
  padding: 3px 6px;
  width: 75px;
}

input[type="button"]:hover 
{
  cursor:pointer;
  background-color: #EAF6FD;
  border: 1px solid #3C7FB1;
  box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
}

input[type="button"][disabled], input[type="button"][disabled]:hover

{
  border: 1px solid #ADB2B5;
  text-shadow: 1px 1px #fff;
  cursor:default;
  background-color: #F4F4F4;
  box-shadow: inset 0 1px 2px #fff;
}


div.frameT {
    width: 100%;
    padding: 0;
    display: table;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}
div.frameTC {
    padding: 0;
    vertical-align: middle;
    display: table-cell;
    margin: 0;
}
.section-title {
    padding:0;
    margin:0;
    color: rgb(11,63,113);
    font-weight: bold;
}
#news {
    overflow-y: scroll;
    height: 100%;
    margin-bottom: 5px;
    border: 1px solid red;
    display: block;

}
<div class="frameT">
<div class="frameTC">



        <div id="main">

            <div id="boxA"><b>Application Title</b></div>

            <div id="boxB">
                <ul id="menu">
                    <li data-show="#1">Notes and Updates</li>
                    <li data-show="#2">Menu Item 2</li>
                    <li data-show="#3">Menu Item 3</li>
                </ul>
            </div>

            <div id="boxC">
              
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac blandit sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis lectus vel pharetra tempus. Nulla sagittis enim mauris, vel imperdiet purus lobortis et. Nullam laoreet neque eget lectus finibus mattis. Cras sagittis, tortor vel vehicula placerat, dui sem imperdiet lectus, sit amet ultricies ante est nec elit. Sed consectetur lobortis dui non dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur elit dui, laoreet in orci et, feugiat malesuada quam. Pellentesque hendrerit diam et leo blandit, non tristique nisi blandit. Praesent ac sem quis turpis euismod malesuada et non justo. Quisque in diam risus. Donec eget sapien at libero ullamcorper sagittis. Integer nunc dolor, suscipit nec tincidunt quis, varius vitae mauris. Quisque malesuada enim ut semper tincidunt.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat ullamcorper iaculis. Donec sit amet turpis eu dui eleifend cursus eget a ante. Vivamus nec ligula a nunc consequat luctus a in libero. Nunc eu felis vel ante pellentesque aliquam eu sed augue. Mauris nec mi sit amet quam euismod pulvinar. Donec euismod sollicitudin bibendum. Maecenas accumsan neque vel pulvinar tempor. Morbi sit amet dolor pellentesque, vehicula lectus sit amet, accumsan mauris. Sed aliquam mi imperdiet quam scelerisque, et euismod felis auctor. Curabitur sit amet eros leo.

Duis placerat, ipsum quis lacinia tempus, purus dolor congue quam, eu tempor orci augue et libero. Curabitur ut ullamcorper mauris, tristique sollicitudin nisi. Ut est dolor, varius id tellus a, sagittis eleifend libero. Fusce gravida scelerisque facilisis. Aenean sollicitudin dolor in ante porttitor, ut finibus felis maximus. Morbi aliquet risus lectus. Pellentesque tincidunt enim quis cursus rutrum. Pellentesque at placerat enim, id consequat ex. Praesent justo magna, fermentum non erat in, aliquam euismod velit. Nulla facilisi. Donec mi nulla, bibendum vel nibh varius, consectetur vestibulum nunc. Vestibulum suscipit mollis efficitur.

Nunc dapibus eget nunc non feugiat. Etiam dictum nulla sed gravida volutpat. Quisque non metus tristique, accumsan tortor sed, sollicitudin lorem. Suspendisse facilisis suscipit lacus fringilla pulvinar. Suspendisse placerat condimentum justo, vel mollis ante lacinia non. Sed tempus elementum ligula, pulvinar accumsan justo viverra eu. Suspendisse justo massa, elementum nec hendrerit a, congue nec arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac blandit sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis lectus vel pharetra tempus. Nulla sagittis enim mauris, vel imperdiet purus lobortis et. Nullam laoreet neque eget lectus finibus mattis. Cras sagittis, tortor vel vehicula placerat, dui sem imperdiet lectus, sit amet ultricies ante est nec elit. Sed consectetur lobortis dui non dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur elit dui, laoreet in orci et, feugiat malesuada quam. Pellentesque hendrerit diam et leo blandit, non tristique nisi blandit. Praesent ac sem quis turpis euismod malesuada et non justo. Quisque in diam risus. Donec eget sapien at libero ullamcorper sagittis. Integer nunc dolor, suscipit nec tincidunt quis, varius vitae mauris. Quisque malesuada enim ut semper tincidunt.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat ullamcorper iaculis. Donec sit amet turpis eu dui eleifend cursus eget a ante. Vivamus nec ligula a nunc consequat luctus a in libero. Nunc eu felis vel ante pellentesque aliquam eu sed augue. Mauris nec mi sit amet quam euismod pulvinar. Donec euismod sollicitudin bibendum. Maecenas accumsan neque vel pulvinar tempor. Morbi sit amet dolor pellentesque, vehicula lectus sit amet, accumsan mauris. Sed aliquam mi imperdiet quam scelerisque, et euismod felis auctor. Curabitur sit amet eros leo.

Duis placerat, ipsum quis lacinia tempus, purus dolor congue quam, eu tempor orci augue et libero. Curabitur ut ullamcorper mauris, tristique sollicitudin nisi. Ut est dolor, varius id tellus a, sagittis eleifend libero. Fusce gravida scelerisque facilisis. Aenean sollicitudin dolor in ante porttitor, ut finibus felis maximus. Morbi aliquet risus lectus. Pellentesque tincidunt enim quis cursus rutrum. Pellentesque at placerat enim, id consequat ex. Praesent justo magna, fermentum non erat in, aliquam euismod velit. Nulla facilisi. Donec mi nulla, bibendum vel nibh varius, consectetur vestibulum nunc. Vestibulum suscipit mollis efficitur.

Nunc dapibus eget nunc non feugiat. Etiam dictum nulla sed gravida volutpat. Quisque non metus tristique, accumsan tortor sed, sollicitudin lorem. Suspendisse facilisis suscipit lacus fringilla pulvinar. Suspendisse placerat condimentum justo, vel mollis ante lacinia non. Sed tempus elementum ligula, pulvinar accumsan justo viverra eu. Suspendisse justo massa, elementum nec hendrerit a, congue nec arcu.
                <div id="1" class="hidden item">

                    <span class="section-title">Notes and Updates</span>

                    <br>

                    <div id="news"></div>

                </div>
                <div id="2" class="hidden item">
                    Content Tab 2
                </div>
                <div id="3" class="hidden item">
                    Content Tab 3
                </div>
            </div>

            <div id="boxD">

                <div style="display: table-cell; vertical-align: middle;">
                    <input type="button" value="Search" class="btn" disabled>
                    <input type="button" value="Save" class="btn" disabled>
                    <input type="button" value="Add" class="btn" disabled>
                    <input type="button" value="Clear All" class="btn">
                    <input type="button" value="Delete" class="btn" disabled>
                    <input type="button" value="Export" class="btn" disabled>
                    <input type="button" value="Recall" class="btn" disabled>
                </div>

            </div><!-- End of Main -->


</div>
</div>
-1
Túlio Castro 16 नवम्बर 2015, 18:37