> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/dom/type/document/size.md).
# document size
[π° JS](/web/js.md) β© [browser](/web/browser.md) β© [DOM](/web/browser/dom.md) β© [types](/web/browser/dom/type.md) β© [Document](/web/browser/dom/type/document.md) β© size
{% hint style="success" %} **document size**
* width: `document.documentElement.offsetWidth`
* height: `document.documentElement.offsetHeight`
{% endhint %}
{% tabs %}
{% tab title="βοΈ ιι»" %}
{% hint style="warning" %}
[.offsetWidth](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth), [.offsetHeight](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) will round the value to an **integer**. If you need a **fractional** value, use [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect).
{% endhint %}
{% hint style="success" %}
* [.clientWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth)/[.clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) = content + padding
* [.offsetWidth](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)/[.offsetHeight](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight) = contnet + padding + **border**
* [.scrollWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth)/[.scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) = content + padding + **overflow**
{% endhint %}
{% endtab %}
{% tab title="πη―δΎ" %}
```javascript
// document size
const doc = {
get width() { return document.documentElement.offsetWidth },
get height() { return document.documentElement.offsetHeight },
};
```
{% endtab %}
{% tab title="π₯ ηΈι" %}
* [box models](/web/browser/dom/type/element/boxes.md)
* [Element+boxes](/web/browser/dom/type/element/+boxes.md)
* [viewport](/web/browser/dom/type/window/viewport.md) size.
* [.paddingBox](/web/browser/dom/type/element/+boxes/padding.md) of [HTMLElement](/web/browser/dom/type/htmlelement.md)
{% endtab %}
{% tab title="π εθ" %}
* [ ] [HTML vs Body: How to Set Width and Height for Full Page Size](https://www.freecodecamp.org/news/html-page-width-height/)
{% endtab %}
{% tab title="π ζε" %}
* [Document](/web/browser/dom/type/document.md) β© [.documentElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement) (the \ element)
* [.borderBox](/web/browser/dom/type/element/+boxes/border.md) of [HTMLElement](/web/browser/dom/type/htmlelement.md)
{% endtab %}
{% endtabs %}