用高度去除Div的高度：自动？ JS / CSS

Question

所以我已经为我的视频播放器完成了.JS的构建，不知怎的，我的定位是我的div伸展（见这里：http://prntscr.com/8tsl4m）

我想删除该部分，但我使用的是骨架框架中的六列类宽度，因此div宽度会动态变化。因此，我不能只定义一个高度，因为它必须是自动的。

我可以使用一行JS或一些我缺少的CSS属性来删除它吗？

请记住，我刚刚开始弄清楚JS甚至用于CSS和HTML中的内容。

如果您需要我的代码，那么这里是：

$(document).ready(function(){
	//INITIALIZE
	var video = $('#myVideo');
	
	//remove default control when JS loaded
	video[0].removeAttribute("controls");
	$('.control').show().css({'bottom':45});
	$('.loading').fadeIn(500);
	$('.caption').fadeIn(500);
 
	//before everything get started
	video.on('loadedmetadata', function() {
		$('.caption').animate({'top':-380},300);
			
		//set video properties
		$('.current').text(timeFormat(0));
		$('.duration').text(timeFormat(video[0].duration));
		updateVolume(0, 0.7);
			
		//start to get video buffering data 
		setTimeout(startBuffer, 150);
			
		//bind video events
		$('.videoContainer')
		.append('<div id="init"></div>')
		.hover(function() {
			$('.control').stop().animate({'bottom':45}, 500);
			$('.caption').stop().animate({'top':-360}, 500);
		}, function() {
			if(!volumeDrag && !timeDrag){
				$('.control').stop().animate({'bottom':45}, 500);
				$('.caption').stop().animate({'top':-380}, 500);
			}
		})
		.on('click', function() {
			$('#init').remove();
			$('.btnPlay').addClass('paused');
			$(this).unbind('click');
			video[0].play();
		});
		$('#init').fadeIn(200);
	});
	
	//display video buffering bar
	var startBuffer = function() {
		var currentBuffer = video[0].buffered.end(0);
		var maxduration = video[0].duration;
		var perc = 100 * currentBuffer / maxduration;
		$('.bufferBar').css('width',perc+'%');
			
		if(currentBuffer < maxduration) {
			setTimeout(startBuffer, 500);
		}
	};	
	
	//display current video play time
	video.on('timeupdate', function() {
		var currentPos = video[0].currentTime;
		var maxduration = video[0].duration;
		var perc = 100 * currentPos / maxduration;
		$('.timeBar').css('width',perc+'%');	
		$('.current').text(timeFormat(currentPos));	
	});
	
	//CONTROLS EVENTS
	//video screen and play button clicked
	video.on('click', function() { playpause(); } );
	$('.btnPlay').on('click', function() { playpause(); } );
	var playpause = function() {
		if(video[0].paused || video[0].ended) {
			$('.btnPlay').addClass('paused');
			video[0].play();
		}
		else {
			$('.btnPlay').removeClass('paused');
			video[0].pause();
		}
	};
	
	//speed text clicked
	$('.btnx1').on('click', function() { fastfowrd(this, 1); });
	$('.btnx3').on('click', function() { fastfowrd(this, 3); });
	var fastfowrd = function(obj, spd) {
		$('.text').removeClass('selected');
		$(obj).addClass('selected');
		video[0].playbackRate = spd;
		video[0].play();
	};
	
	//stop button clicked
	$('.btnStop').on('click', function() {
		$('.btnPlay').removeClass('paused');
		updatebar($('.progress').offset().left);
		video[0].pause();
	});
	
	//fullscreen button clicked
	$('.btnFS').on('click', function() {
		if($.isFunction(video[0].webkitEnterFullscreen)) {
			video[0].webkitEnterFullscreen();
		}	
		else if ($.isFunction(video[0].mozRequestFullScreen)) {
			video[0].mozRequestFullScreen();
		}
		else {
			alert('Your browsers doesn\'t support fullscreen');
		}
	});
	
	//light bulb button clicked
	$('.btnLight').click(function() {
		$(this).toggleClass('lighton');
		
		//if lightoff, create an overlay
		if(!$(this).hasClass('lighton')) {
			$('body').append('<div class="overlay"></div>');
			$('.overlay').css({
				'position':'absolute',
				'width':100+'%',
				'height':$(document).height(),
				'background':'#000',
				'opacity':0.9,
				'top':0,
				'left':0,
				'z-index':999
			});
			$('.videoContainer').css({
				'z-index':1000
			});
		}
		//if lighton, remove overlay
		else {
			$('.overlay').remove();
		}
	});
	
	//sound button clicked
	$('.sound').click(function() {
		video[0].muted = !video[0].muted;
		$(this).toggleClass('muted');
		if(video[0].muted) {
			$('.volumeBar').css('width',0);
		}
		else{
			$('.volumeBar').css('width', video[0].volume*100+'%');
		}
	});
	
	//VIDEO EVENTS
	//video canplay event
	video.on('canplay', function() {
		$('.loading').fadeOut(100);
	});
	
	//video canplaythrough event
	//solve Chrome cache issue
	var completeloaded = false;
	video.on('canplaythrough', function() {
		completeloaded = true;
	});
	
	//video ended event
	video.on('ended', function() {
		$('.btnPlay').removeClass('paused');
		video[0].pause();
	});

	//video seeking event
	video.on('seeking', function() {
		//if video fully loaded, ignore loading screen
		if(!completeloaded) { 
			$('.loading').fadeIn(200);
		}	
	});
	
	//video seeked event
	video.on('seeked', function() { });
	
	//video waiting for more data event
	video.on('waiting', function() {
		$('.loading').fadeIn(200);
	});
	
	//VIDEO PROGRESS BAR
	//when video timebar clicked
	var timeDrag = false;	/* check for drag event */
	$('.progress').on('mousedown', function(e) {
		timeDrag = true;
		updatebar(e.pageX);
	});
	$(document).on('mouseup', function(e) {
		if(timeDrag) {
			timeDrag = false;
			updatebar(e.pageX);
		}
	});
	$(document).on('mousemove', function(e) {
		if(timeDrag) {
			updatebar(e.pageX);
		}
	});
	var updatebar = function(x) {
		var progress = $('.progress');
		
		//calculate drag position
		//and update video currenttime
		//as well as progress bar
		var maxduration = video[0].duration;
		var position = x - progress.offset().left;
		var percentage = 100 * position / progress.width();
		if(percentage > 100) {
			percentage = 100;
		}
		if(percentage < 0) {
			percentage = 0;
		}
		$('.timeBar').css('width',percentage+'%');	
		video[0].currentTime = maxduration * percentage / 100;
	};

	//VOLUME BAR
	//volume bar event
	var volumeDrag = false;
	$('.volume').on('mousedown', function(e) {
		volumeDrag = true;
		video[0].muted = false;
		$('.sound').removeClass('muted');
		updateVolume(e.pageX);
	});
	$(document).on('mouseup', function(e) {
		if(volumeDrag) {
			volumeDrag = false;
			updateVolume(e.pageX);
		}
	});
	$(document).on('mousemove', function(e) {
		if(volumeDrag) {
			updateVolume(e.pageX);
		}
	});
	var updateVolume = function(x, vol) {
		var volume = $('.volume');
		var percentage;
		//if only volume have specificed
		//then direct update volume
		if(vol) {
			percentage = vol * 100;
		}
		else {
			var position = x - volume.offset().left;
			percentage = 100 * position / volume.width();
		}
		
		if(percentage > 100) {
			percentage = 100;
		}
		if(percentage < 0) {
			percentage = 0;
		}
		
		//update volume bar and video volume
		$('.volumeBar').css('width',percentage+'%');	
		video[0].volume = percentage / 100;
		
		//change sound icon based on volume
		if(video[0].volume == 0){
			$('.sound').removeClass('sound2').addClass('muted');
		}
		else if(video[0].volume > 0.5){
			$('.sound').removeClass('muted').addClass('sound2');
		}
		else{
			$('.sound').removeClass('muted').removeClass('sound2');
		}
		
	};

	//Time format converter - 00:00
	var timeFormat = function(seconds){
		var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
		var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
		return m+":"+s;
	};
});

/* video container */
.videoContainer{
	width: 100%;
	height:auto;
	position:relative;
	overflow:hidden;
	background-color: #f2f5f8;
	color: #383737;
    border: 0px solid #f2f5f8;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;}

/* video caption css */
.caption{
	display:none;
    position: relative;
    top: -100%;
	background-color: #f2f5f8;
	font-size:20px;
	font-weight:bold;
	background-color: #f2f5f8;
}

/*** VIDEO CONTROLS CSS ***/
/* control holder */
.control{
	background-color: #f2f5f8;
    font-family: Cabin;
	color: #383737;
	position:relative;
	bottom: 75px;
	left:0;
	width:100%;
	z-index:5;
	display:none;
    height: 40px;
}
/* control top part */
.topControl{
	height:11px;
	border-bottom:1px solid #404040;
	padding:1px 5px;
}
/* control bottom part */
.btmControl{
	clear:both;
	height: 6px;
    opacity: 0.5;
    background-color: #eef2f6;
}
.control div.btn {
	float:left;
	width:34px;
	height:30px;
	padding:0 5px;
	border-right:1px solid #404040;
	cursor:pointer;
}
.control div.text{
	font-size:12px;
	font-weight:bold;
	line-height:30px;
	text-align:center;
	font-family:verdana;
	width:20px;
	border:none;
	color: #383737;
}
.control div.btnPlay{
	background:url(images/play.png) no-repeat 0 0;
	border-left:1px solid #404040;
}
.control div.paused{
	background:url(images/pause.png) no-repeat 0 0px;
}
.control div.btnStop{
	background:url(control.png) no-repeat 0 -60px;
}
.control div.spdText{
	border:none;
	font-size:14px;
	line-height:30px;
	font-style:italic;
}
.control div.selected{
	font-size:15px;
	color: #383737;
}
.control div.sound{
	background:url(control.png) no-repeat -88px -30px;
	border:none;
	float:right;
}
.control div.sound2{
	background:url(control.png) no-repeat -88px -60px !important;
}
.control div.muted{
	background:url(control.png) no-repeat -88px 0 !important;
}
.control div.btnFS{
	background:url(control.png) no-repeat -44px 0;
	float:right;
}
.control div.btnLight{
	background:url(control.png) no-repeat -44px -60px;
	border-left:1px solid #404040;
	float:right;
}
.control div.lighton{
	background:url(control.png) no-repeat -44px -30px !important;
}

/* PROGRESS BAR CSS */
/* Progress bar */
.progress {
	width:85%;
	position:relative;
	float:left;
	cursor:pointer;
	height: 6px;
    background-color: #eef2f6;
}
.progress span {
	height:100%;
	position:absolute;
	top:0;
	left:0;
	display:block;
}
.timeBar{
	z-index:10;
	width:0;
	height: 6px;
    background-color: #db7560;
    
}
.bufferBar{
	z-index:5;
	width:0;
	height: 6px;
    opacity: 0.5;
    background-color: #eef2f6;
}
/* time and duration */
.time{
	width:15%;
	float:right;
	text-align:center;
	font-size:11px;
	line-height:12px;
}

/* VOLUME BAR CSS */
/* volume bar */
.volume{
	position:relative;
	cursor:pointer;
	width:70px;
	height:10px;
	float:right;
	margin-top:10px;
	margin-right:10px;
}
.volumeBar{
	display:block;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:#eee;
	z-index:10;
}

/* OTHERS CSS */
/* video screen cover */
.loading, #init{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(images/loading.gif) no-repeat 50% 50%;
	z-index:2;
	display:none;
    z-index: 100;
}
#init{
	background:url(images/bigplay.png) no-repeat 50% 50% !important;
	cursor:pointer;
    z-index: 50;
}

<div class="six columns">
                <div class="videoContainer">
                   <video id="myVideo" controls preload="auto" poster="images/1-thm.png" width="600" height="350" >
                       <source src="video.mp4" type="video/mp4" />
                       <p>Your browser does not support the video tag.</p>
                   </video>
                <div class="caption">Screamer 2015 Intro</div>
                <div class="control">
                    <div class="topControl">
                        <div class="progress">
                            <span class="bufferBar"></span>
                            <span class="timeBar"></span>
                        </div>
                        <div class="time">
                            <span class="current"></span> / 
                            <span class="duration"></span> 
                        </div>
                    </div>
                    <div class="btmControl">
                        <div class="btnPlay btn" title="Play/Pause video"></div>
                        <div class="btnStop btn" title="Stop video"></div>
                        <div class="spdText btn">Speed: </div>
                        <div class="btnx1 btn text selected" title="Normal speed">x1</div>
                        <div class="btnx3 btn text" title="Fast forward x3">x3</div>
                        <div class="btnFS btn" title="Switch to full screen"></div>
                        <div class="btnLight lighton btn" title="Turn on/off light"></div>
                        <div class="volume" title="Set volume">
                            <span class="volumeBar"></span>
                        </div>
                        <div class="sound sound2 btn" title="Mute/Unmute sound"></div>
                    </div>
                </div>
                <div class="loading"></div>
                </div>
            </div>

Answer 1

在你的div btmControl中，有代码

                    <div class="volume" title="Set volume">
                        <span class="volumeBar"></span>
                    </div>

我现在看不到它的使用。 尝试更改css部分中的相应高度值（.volume和.volumeBar）或考虑删除它（如果它确实没用） 因为它被设置为

display:block;

它应该创建一个新行，而不是与其他div一起填充行。 因此display:inline;也将提供可能的解决方案

此外，以下div也将在新行中对齐。我建议这是你不想要的换行... （有关显示的示例：块效果click here）

但无论如何，这个问题的小提琴版本会有很大帮助！