У меня есть небольшая проблема. Я использую JQuery для установки элемента в полную ширину и высоту функции page и calc() в CSS, чтобы заполнить этот элемент двумя другими элементами. Но есть проблема, когда я пытаюсь изменить размер, появляется вертикальная линия, которая, вероятно, является пространством для полосы прокрутки, хотя нет полосы прокрутки, просто место для нее. И это происходит только в определенных ситуациях, обычно при изменении размера окна на меньший размер. Вот мой код: http://jsfiddle.net/yr4uz3p5/.JQuery, элементы полной ширины CSS не работают
HTML файл:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<link rel="stylesheet" type="text/css" href="css/colors.css"/>
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div>
<section>
</section>
<nav>
</nav>
</div>
</body>
</html>
CSS файл:
* {
margin: 0px;
padding: 0px;
color: #00ff00;
background-color: #000000;
}
section {
min-width: 300px;
width: calc(100% - 300px);
height: 100%;
background-color: blue;
float: left;
}
nav {
width: 300px;
height: 100%;
background: red;
float: left;
}
div {
min-width: 300px;
}
body {
min-width: 300px;
}
JS файл:
$(document).ready(function() {
$("div").width($(window).width());
$("div").height($(window).height());
});
$(window).resize(function() {
$("div").width($(window).width());
$("div").height($(window).height());
});
Основная идея о том, что я хочу навигационный быть расположен справа с фиксированной шириной 300 пикселей, и я хочу, чтобы данные отображались в левой части.
Заранее благодарим за помощь!
EDIT:
Я нашел лучший способ, так как эти элементы всегда будут иметь высоту такой же, как окно, я разместил переполнение: скрытый для тела и теперь черная линия никогда не будет отображаться ...
Кроме того, я попытался сделать то же самое, но нацелился на отдельные элементы (раздел и навигацию) как по ширине, так и по высоте (делая их высоты равными $ (окну) .height() и ширину до $ (window) .width() - 300 для раздела) и удаление элемента div, то же самое произошло. –
calc является экспериментальным и не полностью поддерживается во всех браузерах, особенно IE имеет проблемы, когда дочерний элемент имеет одно и то же свойство, и для многих свойств webkit необходим префикс -webkit-vendor. посмотрите, добавляет ли префиксы поставщиков решения вашей проблемы. (также обратите внимание, что в нем указаны ошибки в MDD-документах) https://developer.mozilla.org/en-US/docs/Web/CSS/calc http://caniuse.com/#search=calc – Philippe
У меня есть попробовал установить ширину и высоту без calc(), с JQuery ... И то же самое происходит ... –