CSS-样式化 div 不随父 div 滚动

Question

我正在使用一些 css 样式的复选框，并希望有一个父容器（我正在使用 div）在它们溢出一定高度时滚动。我目前正在使用这个：

/**
 * Menu Styles
 */

.fieldset-auto-width {
 display: inline-block;
}

.menu_header
{
 vertical-align:middle;
 background-color:#d0eace; 
 padding-top:24px;
 padding-bottom:24px;
 padding-left:24px;
 padding-right:24px;
 width:500px;
}
.menu_button
{
 padding-top:12px;
 padding-left:8px;
 width:50px;
 vertical-align:middle;
}


.menu_description
{
 padding-top:12px;
 padding-left:8px;
 padding-right:8px;
 width:400px;

}

.created_by
{
 display:inline-block;
 float:right;
}

input,.container
{
  background-color:white;
}

select
{
   color: #000;
   font-size: 12px;
   background: transparent;
   /*-webkit-appearance: none;*/
}

button, option {
  background-color: white;/*#d0eace;*/
}

input[type=radio] {
 visibility: hidden;
}

/**
 * frnakRadio Buttons!
 */
.frnakRadio {
 width: 24px;
 height: 24px;
 background: #ddd;
 margin: 10px 10px;

 border-radius: 100%;
 position: absolute;
 -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
 -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
 box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

/**
 * Create the checkbox button
 */
.frnakRadio label {
 display: inline-block;
 width: 18px;
 height: 18px;
 border-radius: 100px;

 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -o-transition: all .5s ease;
 -ms-transition: all .5s ease;
 transition: all .5s ease;
 cursor: pointer;
 position: relative;
 top: 3px;
 left: 3px;
 z-index: 1;

 background: #333;

 -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
 -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
 box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}

/**
 * Create the checked state
 */
.frnakRadio input[type=radio]:checked + label {
 background: #26ca28;
}

.checkname
{
 display: block; 
 margin: 10px 35px;
}


input[type=text] {
 height:2.2em;
 padding:5px 5px;
 margin-bottom: 10px ;
 border-radius:.75em;
 -moz-border-radius:.5em;
 -webkit-border-radius:.5em;
 text-transform:none;
 width:200px;
 background:-webkit-gradient(linear, left top, left 25, from(#FFF), color-stop(1%,#FFF), to(#d0eace));
 background:-moz-linear-gradient(right, #EEEDEE, #d0eace); /* For Firefox 3.6 to 15 */
 color:#000;
 font-size:.9em;
}

input[type=text]:focus{
 box-shadow:1px 1px 10px #446;
 outline:none;
}

.crunch:hover
{
 background-color: #d0eace;
 font-weight:bold;
}

.centercontainer {
 /* Internet Explorer 10 */
 display:-ms-flexbox;
 -ms-flex-pack:center;
 -ms-flex-align:center;

 /* Firefox */
 display:-moz-box;
 -moz-box-pack:center;
 -moz-box-align:center;

 /* Safari, Opera, and Chrome */
 /*display:-webkit-box;
 -webkit-box-pack:center;
 -webkit-box-align:center;*/

 /* W3C */
 display:box;
 box-pack:center;
 box-align:center;

 display: inline-block;


}

.status
{
 border-radius: 100%;
 margin:0px 20px;
 border: 1px solid black;
 width: 15px;
 height: 15px;
 float:center;
}

.queued
{
 background: yellow;
}

.running
{
 background:green;
}

.failed
{
 background:red;
}

.key
{
 float: left;
 width: 15px;
 text-align: left;
 margin: 2px 2px;
 margin-left:25px;
 display: inline-block;
}

.keytext
{
 width: 80px;
 float: left;
 text-align: left;
 margin: 2px 2px;
 display: inline-block;
 font-size:14px;
 font:Times;
}

.helper {
    position: relative;
    padding: 5px;
    width: 15px; height:15px;
    cursor:pointer;
}

#loading-image {
    margin:0 auto;
    background-color: #c0dabd;
    width: 128px;
    height: 128px;
    z-index: 50;
    
    position:absolute;
    left:45%;
    top:40%;
    margin:-0px 0 0 -0px;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    -khtml-border-radius: 10px;
}

//FRNAKCHECK!!!

input[type=checkbox] {
        visibility: hidden;
}


.frnakcheckbox {
 width: 24px;
 height: 22px;
 background: #fcfff4;

 background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
 margin: -12px 5px auto;
 -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 position: absolute;
}

.frnakcheckbox label {
 cursor: pointer;
 position: absolute;
 width: 20px;
 height: 20px;
 left: 2px;
 top: 0px;

 -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
 -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
 box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

 background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
 background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
 background: -o-linear-gradient(top, #222 0%, #45484d 100%);
 background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
 background: linear-gradient(top, #222 0%, #45484d 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.frnakcheckbox label:after {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 content: '';
 position: absolute;
 width: 16px;
 height: 16px;
 background: #00bf00;

 background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
 background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
 background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
 background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
 background: linear-gradient(top, #00bf00 0%, #009400 100%);

 top: 2px;
 left: 2px;

 -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

.frnakcheckbox label:hover::after {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
 filter: alpha(opacity=30);
 opacity: 0.3;
}

.frnakcheckbox input[type=checkbox]:disabled{
        background: #FFFFFF;
 background: -webkit-linear-gradient(top, #ffffff 0%, #009400 100%);
        background: -moz-linear-gradient(top, #ffffff 0%, #009400 100%);
        background: -o-linear-gradient(top, #ffffff 0%, #009400 100%);
        background: -ms-linear-gradient(top, #ffffff 0%, #009400 100%);
        background: linear-gradient(top, #ffffff 0%, #009400 100%);

}



.frnakcheckbox input[type=checkbox]:checked + label:after {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=100);
 opacity: 1;
}

.checklabel {
 margin: -10px 40px auto;
}

<div id="" style="overflow:auto; height:300px; display: inline-block;">
  <b>Sample Text:</b><span class="helper" id="help1" style="color:blue;"><b>?</b></span>
  <br>
  <br>
  <br>
  <div class="fcheckbox">
    <input type="checkbox" value="library_522">
    <label for="control522"></label>
  </div>
  <div class="checklabel">522</div>
  <br>
  <div class="fcheckbox">
    <input type="checkbox" value="library_523">
    <label for="control523"></label>
  </div>
  <div class="checklabel">523</div>
  <br>
</div>

最终看起来像这样：http://imgur.com/EPZ3SnQ

请注意 div 不包含实际的复选框，但标签包含！

这是单选按钮的 CSS：http://pastebin.com/up29LWCD

我是 css 的新手，还不太了解定位的工作原理。任何帮助，将不胜感激！我尝试了各种样式标签组合，但没有真正的进展...

Answer 1

如果您在容器中使用它们并设置溢出，它们似乎工作正常？

/**
 * Menu Styles
 */

.container {
  margin: 10px;
  border: 1px solid black;
  height: 100px;
  width: 100px;
  overflow-y: scroll;
}
/**
*  FRNAKCHECK
*/
.frnakcheckbox {
  width: 24px;
  height: 22px;
  background: #fcfff4;
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=0);
  margin: -12px 5px auto;
  -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
  position: absolute;
}
.frnakcheckbox label {
  cursor: pointer;
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  top: 0px;
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
  background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
  background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
  background: -o-linear-gradient(top, #222 0%, #45484d 100%);
  background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
  background: linear-gradient(top, #222 0%, #45484d 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#45484d', GradientType=0);
}
.frnakcheckbox label:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #00bf00;
  background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
  background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
  background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
  background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
  background: linear-gradient(top, #00bf00 0%, #009400 100%);
  top: 2px;
  left: 2px;
  -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.frnakcheckbox label:hover::after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  opacity: 0.3;
}
.frnakcheckbox input[type=checkbox]:disabled {
  background: #FFFFFF;
  background: -webkit-linear-gradient(top, #ffffff 0%, #009400 100%);
  background: -moz-linear-gradient(top, #ffffff 0%, #009400 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #009400 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #009400 100%);
  background: linear-gradient(top, #ffffff 0%, #009400 100%);
}
.frnakcheckbox input[type=checkbox]:checked + label:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}
.checklabel {
  margin: -10px 40px auto;
}

<b>Sample Text:</b>
<span class="helper" id="help1" style="color:blue;"><b>?</b></span>
<div class="container">
  <div class="fcheckbox">
    <input type="checkbox" value="library_522">
    <label for="control522">522</label>
  </div>
  <br>
  <div class="fcheckbox">
    <input type="checkbox" value="library_523">
    <label for="control523">523</label>
  </div>
  <div class="fcheckbox">
    <input type="checkbox" value="library_522">
    <label for="control522">522</label>
  </div>
  <br>
  <div class="fcheckbox">
    <input type="checkbox" value="library_523">
    <label for="control523">523</label>
  </div>
  <div class="fcheckbox">
    <input type="checkbox" value="library_522">
    <label for="control522">522</label>
  </div>
  <br>
  <div class="fcheckbox">
    <input type="checkbox" value="library_523">
    <label for="control523">523</label>
  </div>
  <div class="fcheckbox">
    <input type="checkbox" value="library_522">
    <label for="control522">522</label>
  </div>
  <br>
  <div class="fcheckbox">
    <input type="checkbox" value="library_523">
    <label for="control523">523</label>
  </div>

  <br>
</div>

CSS-样式化 div 不随父 div 滚动

CSS-Styled div does not scroll with parent div

html

css

web