Div блок вылазит за границы страницы

10 февраля 2022, 07:30

Доброго времени суток всем. Имеется код, в нем по нажатию на кнопку копируется скрытый текст. По наведению на кнопку, с помощью других пользователей теперь высвечивается скрытый текст. Поработал со стилями, чтобы все было красиво на вид, все выводится, все отлично.Но вот незадача, у крайних элементов, блок div вылазит за края, ни как не могу это исправить уже по-всякому пробовал, но не получается( Просьба навести в нужное русло. Код ниже:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8">     
	<title>ТЕКСТ</title> 
	 
	<style type="text/css"> 
	html{ 
		font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} 
	body{ 
		margin: 0; 
		padding: 0;	 
		text-align: left; 
	} 
	 
 
	</style> 
	 
<script src="http://www.net-f.ru/primer/clipboard/clipboard.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
</head> <body style="font-size: 14px; position: relative; padding: 0;"> 
<p align="center">ТЕКСТ</p> 
	<table class="table"> 
	<tbody> 
		<tr> 
		     
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
 
 
 
</tr> 
</tbody> 
</table> 
<style type="text/css"> 
p { 
    font-size: 1rem; 
    text-transform: uppercase; 
    text-align: center; 
    color: #00838f; 
} 
 
.btn { position: relative; } 
 
.info {  
 position: absolute; 
 border: 3px solid #FFDEAD; 
 display: inline-table; 
 background: #158078;  
 text-indent: 0px; 
 cursor: progress; 
 width: 300px;   
 left: 0em;  
 top: 3em; 
 line-height: 1.5; 
 z-index:9999 
	} 
	 
   
  .table { border-collapse: collapse; width: 100%; 
	} 
	.table th, .table td { 
	    border: 1px solid; 
		padding: 3px; 
		text-align: center; 
		vertical-align: middle; 
		position: relative; 
		cursor: pointer; 
		background: #cbdfef; 
	} 
 
	/* Hover */ 
	.table td:hover:after { 
		content: ''; 
		position: absolute; 
		top: 0px; 
		right: 0px;  
		bottom: 0px;     
		left: 0px; 
		border: 3px solid #ffe5c5; 
		border-radius: 7px; 
		 
	} 
 
	/* Click */ 
	.table td.active:after { 
		content: ''; 
		position: absolute; 
		top: 0px; 
		right: 0px;  
		bottom: 0px;     
		left: 0px; 
		border: 3px solid orange !important; 
		border-radius: 7px; 
	} 
</style> 
 
<script> 
$(document).ready(function(){ 
	$('.table th, .table td').click(function(){ 
		$('.table td').removeClass('active'); 
		$(this).addClass('active'); 
	}); 
}); 
</script> 
 
<script> 
var cb = new Clipboard('.btn'); // класс кнопки 
cb.on('success', function(e){ 
        // уведомление, можно настроить своё 
        // выделение скопированного текста на 1,5 секунды 
	window.setTimeout(function(){e.clearSelection();}, 1500); 
}); 
</script> 
 
<script> 
    $(document).ready(function(){ 
		$('.table th, .table td').click(function(){ 
			$('.table td').removeClass('active'); 
			$(this).addClass('active'); 
		}); 
 
		$(".btn").on('mouseover', function() { 
			$(this).children(".info").text($(this).attr("data-clipboard-text")); 
		}); 
 
		$(".btn").on('mouseout', function() { 
			$(this).children(".info").text(""); 
		}); 
	}); 
   
  var cb = new Clipboard('.btn'); // класс кнопки 
	cb.on('success', function(e){ 
		window.setTimeout(function(){ 
			console.log(true); 
			e.clearSelection(); 
		}, 1500); 
	}); 
</script> 
<script> 
window.onload = function(){ 
        var dv = document.getElementById("info"); 
} 
</script> 
</body></html>

Answer 1

В зависимости от того, где это будет использоваться, и будет ли эта разметка иметь все столько же элементов сколько сейчас, или же они будут как то генерироваться.

Можно попробовать просто элементам которые вылазят за края, через "nth-child" добавить противоположное значение (выравнивание по правому краю, а не по левому), тогда они не будут выходить за контейнер.

Но это не гибкое решение, думаю лучше всего написать js который будет все это отслеживать. Пример с nth-child:

td.btn:nth-child(6n) .info {
    left: auto;
    right: 0;
}

// ваш пример но с (nth-child)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8">     
	<title>ТЕКСТ</title> 
	 
	<style type="text/css"> 
	html{ 
		font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} 
	body{ 
		margin: 0; 
		padding: 0;	 
		text-align: left; 
	} 
	 
 
	</style> 
	 
<script src="http://www.net-f.ru/primer/clipboard/clipboard.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
</head> <body style="font-size: 14px; position: relative; padding: 0;"> 
<p align="center">ТЕКСТ</p> 
	<table class="table"> 
	<tbody> 
		<tr> 
		     
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
<td class="btn" data-clipboard-action="copy" data-clipboard-text="ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст">ТЕКСТ <div class="info"></div></td> 
 
 
 
</tr> 
</tbody> 
</table> 
<style type="text/css"> 
p { 
    font-size: 1rem; 
    text-transform: uppercase; 
    text-align: center; 
    color: #00838f; 
} 
 
.btn { position: relative; } 
 
.info {  
 position: absolute; 
 border: 3px solid #FFDEAD; 
 display: inline-table; 
 background: #158078;  
 text-indent: 0px; 
 cursor: progress; 
 width: 300px;   
 left: 0em;  
 top: 3em; 
 line-height: 1.5; 
 z-index:9999 
	} 
	 
   
  .table { border-collapse: collapse; width: 100%; 
	} 
	.table th, .table td { 
	    border: 1px solid; 
		padding: 3px; 
		text-align: center; 
		vertical-align: middle; 
		position: relative; 
		cursor: pointer; 
		background: #cbdfef; 
	} 
 
	/* Hover */ 
	.table td:hover:after { 
		content: ''; 
		position: absolute; 
		top: 0px; 
		right: 0px;  
		bottom: 0px;     
		left: 0px; 
		border: 3px solid #ffe5c5; 
		border-radius: 7px; 
		 
	} 
 
	/* Click */ 
	.table td.active:after { 
		content: ''; 
		position: absolute; 
		top: 0px; 
		right: 0px;  
		bottom: 0px;     
		left: 0px; 
		border: 3px solid orange !important; 
		border-radius: 7px; 
	} 
   
  /* nth-child */ 
   
  td.btn:nth-child(6n) .info, 
  td.btn:nth-child(7n) .info, 
  td.btn:nth-child(8n) .info, 
  td.btn:nth-child(9n) .info, 
  td.btn:nth-child(10n) .info { 
        left: auto; 
        right: 0; 
    } 
</style> 
 
<script> 
$(document).ready(function(){ 
	$('.table th, .table td').click(function(){ 
		$('.table td').removeClass('active'); 
		$(this).addClass('active'); 
	}); 
}); 
</script> 
 
<script> 
var cb = new Clipboard('.btn'); // класс кнопки 
cb.on('success', function(e){ 
        // уведомление, можно настроить своё 
        // выделение скопированного текста на 1,5 секунды 
	window.setTimeout(function(){e.clearSelection();}, 1500); 
}); 
</script> 
 
<script> 
    $(document).ready(function(){ 
		$('.table th, .table td').click(function(){ 
			$('.table td').removeClass('active'); 
			$(this).addClass('active'); 
		}); 
 
		$(".btn").on('mouseover', function() { 
			$(this).children(".info").text($(this).attr("data-clipboard-text")); 
		}); 
 
		$(".btn").on('mouseout', function() { 
			$(this).children(".info").text(""); 
		}); 
	}); 
   
  var cb = new Clipboard('.btn'); // класс кнопки 
	cb.on('success', function(e){ 
		window.setTimeout(function(){ 
			console.log(true); 
			e.clearSelection(); 
		}, 1500); 
	}); 
</script> 
<script> 
window.onload = function(){ 
        var dv = document.getElementById("info"); 
} 
</script> 
</body></html>

Answer 2

CSS

ВНИМАНИЕ
не претендую на правильность подхода, его работоспособность и вообще, это всё мои личные фантазии на ночь

.sticky {
    position: -webkit-sticky;
    background-color: #dc9934;
    position: sticky;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    width: 250px;
    z-index: 1;
}

.sticky { 
  position: -webkit-sticky; 
  background-color: #dc9934; 
  position: sticky; 
  bottom: 0; 
  top: 0; 
  right: 0; 
  left: 0; 
  display: block; 
  width: 250px; 
  z-index: 1; 
} 
 
.box { 
  position: relative; 
  height: 1500px; 
} 
 
.box:nth-child(2n) { 
  background-color: #34dcb514; 
} 
 
.ho .sticky { 
  display: none; 
} 
 
.ho:hover .sticky { 
  display: block; 
}

<div class="box"><h2>ниже</h2></div> 
<div class="box"> 
  qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas <br> qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas <br> qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas <br> 
  <span style="position: relative; left: 150px;"> 
		<span class="sticky"> sticky stickystickystickystickysticky sticky sticky stickystickysticky</span> 
  </span> 
  qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas <br> qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas <br> qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas <br> 
</div> 
<div class="box"></div> 
<div class="box"> 
  <div class="box ho" style="min-width: 450px;"> 
    <h2>наведи мышку</h2> 
    qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas <br> qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas <br> qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas <br> 
    <span style="position: relative; left: 150px;"> 
			<span class="sticky"> sticky stickystickystickystickysticky sticky sticky stickystickysticky</span> 
    </span> 
    qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas <br> qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas <br> qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas qqqwa sadas <br> 
  </div> 
</div> 
<div class="box"></div>

тут есть ещё один способ на css, но в том примере текст может уйти ниже, что приводит к появлению прокрутки

JavaScrip

написать скрипт используя:

рабочая область - window.innerWidth window.innerHeight

позиция и габариты "кнопки"

var el: HTMLElement;
const { top, left, width, height } = el.getBoundingClientRect()

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Div блок вылазит за границы страницы

CSS

JavaScrip

callback функция с циклом for внутри

Почему возникает ошибка: Malformed arrow function parameter list

Как проигнорировать знак - в input number

Как добавить класс к элементам (JS)