gpt4 book ai didi

javascript - JQuery,CSS 全宽元素不起作用

转载 作者:行者123 更新时间:2023-11-28 07:57:56 25 4
gpt4 key购买 nike

我有个小问题。我使用 JQuery 将元素设置为页面的完整宽度和高度,并使用 CSS 中的 calc() 函数用其他两个元素填充该元素。但是有一个问题,当我尝试调整大小时,似乎有一条垂直线可能是滚动条的空间,尽管没有滚动条,只有它的空间。而且它仅在特定情况下发生,通常是当我将窗口调整为较小尺寸时。这是我的代码:http://jsfiddle.net/yr4uz3p5/ .

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 像素,我希望数据显示在左侧。

在此先感谢您的帮助!

编辑:

我找到了更好的方法,因为这些元素的高度始终与窗口相同,我将 overflow: hidden 放置在 body 中,现在黑线将永远不会显示...

最佳答案

尝试另外将 div min-width 设置为 calc(100%)

div {
min-width:calc(100%);
}

jsfiddle http://jsfiddle.net/yr4uz3p5/1/

关于javascript - JQuery,CSS 全宽元素不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29996321/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com