<think>我们正在讨论的是在
JSP页面中
设置div的
宽度和
高度。根据用户提供的引用，我们可以使用JavaScript
动态设置，也可以使用CSS
样式直接
设置。由于
JSP最终会生成HTML，所以我们可以使用标准的HTML和CSS方法，也可以结合JavaScript（如果需要
动态改变）。
引用分析：
[^1]：使用JavaScript
动态调整元素的
宽度和
高度（通过
style属性，结合offsetWidth/offsetHeight）。
[^2]：
设置span的
宽度和
高度（注意span是
行内元素，默认
设置宽高无效，需要转换为
行内块或块元素）。
[^3]：使用JavaScript
动态设置div的
宽高，以解决嵌套gridv
iew的布局问题（避免出现窗口滚动条，而让div出现滚动条）。
[^4]：使用JavaScript
设置div的
宽度（直接通过id获取元素并
设置style.width）。
因此，我们可以通过两种方式
设置div的
宽高：
1. 使用CSS（内联
样式、内部
样式表或外部
样式表）静态
设置。
2. 使用JavaScript
动态设置（根据用户交互或其他条件）。
由于用户的问题是在
JSP页面中
设置div的
宽度和
高度，我们可以提供以下方法：
方法一：使用CSS内联
样式（直接在div标签中
设置）
示例：
```
jsp
<div
style="width: 500px; height: 300px; background-color: #f0f0f0;">
这是一个固定
宽高的div
</div>
```
方法二：使用CSS内部
样式表（在
JSP的
style标签中定义）
示例：
```
jsp
<
style>
.myDiv {
width: 500px;
height: 300px;
background-color: #e0e0e0;
}
</
style>
<div class="myDiv">
这是一个通过CSS类
设置宽高的div
</div>
```
方法三：使用外部CSS文件（推荐，便于维护）
在外部CSS文件（如
styles.css）中定义：
```css
.myDiv {
width: 500px;
height: 300px;
background-color: #d0d0d0;
}
```
在
JSP页面中引入该CSS文件：
```
jsp
<link rel="
stylesheet" type="text/css" href="
styles.css">
<div class="myDiv">
这是一个通过外部CSS
设置宽高的div
</div>
```
方法四：使用JavaScript
动态设置（根据引用[1][3][4]）
如果需要根据某些条件（如窗口大小变化、用户操作等）
动态调整div的
宽高，可以使用JavaScript。
示例：在页面加载后
设置div的
宽高
```
jsp
<div id="myDynamicDiv"
style="background-color: #ccc;">
这是一个
动态设置宽高的div
</div>
<script type="text/javascript">
// 页面加载完成后执行
window.onload =
function() {
var myDiv = document.getElementById('myDynamicDiv');
//
设置宽度为500像素，
高度为300像素
myDiv.
style.width = '500px';
myDiv.
style.height = '300px';
};
</script>
```
或者，根据引用[1]中的方法，可以
动态增加或减少
宽高（例如通过按钮触发）：
```
jsp
<div id="resizableDiv"
style="width:100px; height:100px; background-color:yellow; border:1px solid black;">
可调整大小的div
</div>
<button onclick="resizeDiv(10,0)">增加
宽度</button>
<button onclick="resizeDiv(-10,0)">减少
宽度</button>
<button onclick="resizeDiv(0,10)">增加
高度</button>
<button onclick="resizeDiv(0,-10)">减少
高度</button>
<script type="text/javascript">
function resizeDiv(deltaWidth, deltaHeight) {
var div = document.getElementById('resizableDiv');
// 获取当前
宽度和
高度（注意：offsetWidth返回的是数字，单位是像素，但类型为数字，不包括单位）
var currentWidth = div.offsetWidth;
var currentHeight = div.offsetHeight;
// 计算新的
宽高
var newWidth = currentWidth
+ deltaWidth;
var newHeight = currentHeight
+ deltaHeight;
//
设置新的
宽高（需要加上单位）
div.
style.width = newWidth
+ 'px';
div.
style.height = newHeight
+ 'px';
}
</script>
```
注意：如果div的
样式是通过CSS类
设置的，那么直接通过
style属性
设置会覆盖类
样式（
行内样式优先级较
高）。
另外，关于div的显示类型：div默认是块级元素（display:block），所以
设置宽高是有效的。而如果是
行内元素（如span）则需要
设置display属性（如inline-block或block）才能
设置宽高（引用[2]中提到的问题）。
因此，在
JSP中
设置div的
宽高，我们可以根据实际需求选择静态（CSS）或
动态（JavaScript）方法。
总结步骤：
1. 确定div是否需要静态或
动态设置宽高。
2. 静态
设置：使用内联
样式、内部
样式表或外部
样式表。
3.
动态设置：使用JavaScript，在需要的时候（如页面加载完成、事件触发时）通过DOM操作
设置style.width和
style.height。
注意：在
设置宽高时，单位通常是像素（px），也可以是百分比（%）、em等，但需注意百分比是相对于父元素的。
如果div的
宽高需要根据数据
动态生成（例如从数据库读取的数值），则可以在
JSP中嵌入Java代码：
```
jsp
<%
int divWidth = 500; // 可以从request作用域中获取或计算
int divHeight = 300;
%>
<div
style="width:<%=divWidth%>px; height:<%=divHeight%>px;">
通过Java变量
设置宽高
</div>
```
但要注意，尽量避免在
JSP中嵌入过多的Java代码，保持视图层的简洁。建议将业务逻辑放在Servlet或JavaBean中，然后通过EL表达式和
JSTL来显示。
使用EL表达式：
```
jsp
<%-- 假设在Servlet中
设置了request属性：request.setAttribute("divWidth", 500); --%>
<div
style="width:${divWidth}px; height:${divHeight}px;">
使用EL表达式
设置宽高
</div>
```
综上所述，根据不同的场景，可以选择不同的方法在
JSP页面中
设置div的
宽度和
高度。
§§相关问题§§
1. 如何在
JSP中
动态调整div的大小?
2.
JSP页面中如何避免div
宽高设置失效?
3. 如何通过
JSP后端数据控制前端div的
样式?</think>在
JSP页面中
设置div的
宽度和
高度可以通过CSS或JavaScript
实现。以下是具体方法及示例，结合了您提供的参考内容：
### 方法1：使用CSS内联
样式（推荐静态
设置）
直接在div标签中通过`
style`属性
设置：
```
jsp
<div
style="width: 500px; height: 300px; background: #f0f0f0;">
固定尺寸的div
</div>
```
### 方法2：使用CSS类选择器（推荐批量
设置）
在`<
style>`标签或外部CSS文件中定义
样式：
```
jsp
<
style>
.custom-div {
width: 80%;
height: 200px;
border: 1px solid #ccc;
margin: 10px;
}
</
style>
<div class="custom-div">
通过CSS类
设置的div
</div>
```
### 方法3：使用JavaScript
动态设置（推荐响应式场景）
根据引用[1][3][4]的方法，通过
JS动态调整尺寸：
```
jsp
<div id="resizableDiv"
style="background: #e0e0e0;">
动态调整大小的div
</div>
<script>
// 页面加载时
设置初始尺寸
window.onload =
function() {
const div = document.getElementById('resizableDiv');
div.
style.width = "400px";
div.
style.height = "150px";
};
// 示例：按钮点击增加尺寸（引用[1]方法）
function enlargeDiv() {
const div = document.getElementById('resizableDiv');
const currentWidth = div.offsetWidth;
const currentHeight = div.offsetHeight;
div.
style.width = (currentWidth
+ 10)
+ "px";
div.
style.height = (currentHeight
+ 10)
+ "px";
}
</script>
<button onclick="enlargeDiv()">增大10px</button>
```
### 关键注意事项
1. **单位必须明确**（如`px`, `%`, `vw`等）
```
jsp
<!-- 正确 -->
<div
style="width: 50%; height: 30vh;">
<!-- 错误 -->
<div
style="width: 50; height: 30;">
```
2. **块级元素特性**（div默认`display:block`，
宽度100%需主动
设置）
3. **
动态内容处理**（引用[3]场景）
```
jsp
<div id="container"
style="overflow:auto; width:100%;">
<
jsp:include page="
动态内容.
jsp"/>
</div>
<script>
// 根据内容
动态调整
高度
document.getElementById('container').
style.height =
document.body.scrollHeight
+ "px";
</script>
```
### 常见问题解决
1. **
设置无效的情况**（引用[2]问题）：
- 确保父容器有明确尺寸
- 检查CSS优先级（使用`!important`调试）
```css
.force-size {
width: 300px !important;
height: 200px !important;
}
```
2. **响应式设计建议**：
```css
/* 移动端优先 */
.responsive-div {
width: 100%;
height: auto;
min-height: 100px;
}
/* 桌面端适配 */
@media (min-width: 768px) {
.responsive-div {
width: 50%;
height: 300px;
}
}
```
>[!TIP]
>优先使用CSS解决方案，JavaScript更适合
动态交互场景。对于
JSP中的
动态数据，建议结合EL表达式：
>```
jsp
><div
style="width:${bean.width}px; height:<%=request.getAttribute("height")%>px">
>
动态数据驱动的div
></div>
>```
本文介绍了一种使用JavaScript动态调整图片宽度和高度的方法，该方法能够有效地控制图片展示的大小，即使图片标签中已设定固定尺寸，依然可以通过style属性进行覆盖调整。
扫一扫
986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
