CSS-Styled div不会与父div一起滚动

时间:2015-01-12 17:10:57

标签: html css css3 web

我正在使用一些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>
&#13;
&#13;
&#13;

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

请注意,实际的复选框不包含在div中,但标签是!

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

我是css的新手,并且很难理解定位是如何运作的。任何帮助,将不胜感激!我尝试过不同的样式标签组合而没有真正的进展......

1 个答案:

答案 0 :(得分:1)

如果你在容器中使用它们并设置溢出它们似乎工作正常吗?

&#13;
&#13;
/**
 * 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;
}
&#13;
<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>
&#13;
&#13;
&#13;